🖼️ Phase 6 · Images & Media🟢 BeginnerMODULE 17

Images

⏱️ 15 min read

📖 Theory + Code

🧩 5 Quiz Questions

🏗️ 1 Challenge

Course progress49%

🎯 What you'll learn: The <img> element, why alt text is non-negotiable, setting dimensions to prevent layout shift, and lazy loading with loading="lazy".

Section 1

The img Element

<img> is a void element — it has no closing tag and no content between tags. It requires src (the image file) and alt (a text description).

img-basic.html

HTML

<img src="cat.jpg" alt="A ginger cat sleeping on a windowsill">

Section 2

alt Text Is Not Optional

alt is read aloud by screen readers, displayed if the image fails to load, and used by search engines to understand image content. Write what the image conveys, not just what it shows.

Bad alt text	Good alt text
`alt="image1.jpg"`	`alt="Student coding on a laptop at a desk"`
`alt="photo"`	`alt="Line graph showing revenue growth from 2023 to 2026"`
(missing entirely)	`alt=""` for purely decorative images

💡

Decorative images use alt=""

If an image is purely decorative (a background flourish that adds nothing informational), use an empty alt="" — not omit the attribute entirely. An empty alt tells screen readers to skip it silently; a missing alt makes some screen readers announce the whole filename instead.

Section 3

width, height & Preventing Layout Shift

Always set width and height attributes. The browser reserves the correct space before the image downloads, preventing the page from jumping around as images load — a real Core Web Vitals metric called Cumulative Layout Shift (CLS).

img-dimensions.html

HTML

<img src="hero.jpg" alt="Team collaborating in an office"
     width="800" height="450">

<!-- CSS can still make it responsive — width/height just set the ASPECT RATIO -->
<style>
  img { max-width: 100%; height: auto; }
</style>

Section 4

Lazy Loading

loading="lazy" tells the browser to defer loading an image until it's about to scroll into view — a free, one-attribute performance win for images below the fold. Never lazy-load your hero image at the top of the page — that one should load immediately.

img-lazy.html

HTML

<!-- Hero image: load immediately (no lazy) -->
<img src="hero.jpg" alt="..." width="1200" height="600">

<!-- Images further down the page: lazy load -->
<img src="gallery-1.jpg" alt="..." loading="lazy" width="400" height="300">

⚠️

Don't lazy-load above-the-fold images

Lazy loading your hero/header image actually hurts performance — it delays the image the user sees first. Reserve loading="lazy" for images below the initial viewport.

🧩 Knowledge Check — Lesson 17

5 questions to test your image knowledge.

1. Which two attributes does <img> require at minimum?

2. What's the correct alt text for a purely decorative image?

3. Why set width and height attributes on images?

4. What does loading="lazy" do?

5. Should you use loading="lazy" on your hero image at the top of the page?

💪

Coding Challenge — Lesson 17

Apply what you learned · Beginner Level

Challenge: Build an Image Gallery Section

1. Add a hero image at the top with proper alt text, width, and height — no lazy loading.
2. Add 3 gallery images below it, each with loading="lazy" and meaningful alt text.
3. Add one purely decorative divider image with alt="".

💡 Show hints if you're stuck

Hero: <img src="hero.jpg" alt="..." width="1200" height="600">
Gallery: add loading="lazy" to each
Decorative: <img src="divider.svg" alt="">

Finished this lesson?

Mark it complete to track your progress.

Module 17 of 62Phase 6 — Images & Media

Images

The img Element

alt Text Is Not Optional

width, height & Preventing Layout Shift

Lazy Loading

Lesson 17 Complete!