Images

The img element embeds an image. It's a void element — no end tag:

<img src="images/red-panda.jpg" alt="A red panda sleeping on a tree branch" width="800" height="533">

• src — the image's URL.
• alt — a text alternative, used by screen readers, shown if the image fails to load, and read by search engines. It's required.
• width and height — the image's intrinsic size in pixels (no units). The browser reserves the right space before the image downloads, so the page doesn't jump around as images arrive. CSS can still resize the image; the browser keeps the proportions from these numbers.

Writing good alt text

Ask: if I replaced the image with text, what would I write?

<!-- Informative image: describe what matters -->
<img src="chart.png" alt="Sales doubled from 2024 to 2025" width="600" height="400">

<!-- Image inside a link: describe the destination -->
<a href="/"><img src="logo.svg" alt="Corner Bakery home" width="120" height="40"></a>

<!-- Decorative image: empty alt, so screen readers skip it -->
<img src="divider-flourish.png" alt="" width="300" height="20">

• Be concise and specific. Don't start with "Image of" — screen readers already say it's an image.
• Decorative images get alt="" (empty, not missing). A missing alt makes screen readers read out the file name instead.
• Text in an image must be in the alt text.

The validator enforces alt:

<!-- Wrong: missing alt -->
<img src="photo.jpg" width="400" height="300">

error: An 'img' element must have an 'alt' attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

Image formats

Keep images small: resize them to the largest size they'll be shown at, and compress them. Our Image Compressor, Image Resizer, and WebP Converter help. Level 2 shows how to serve different sizes to different screens.

Figures and captions

Use figure with figcaption for an image (or chart, code sample, or quote) that has a visible caption:

<figure>
  <img src="images/bridge.jpg" alt="The Golden Gate Bridge in fog, seen from the north" width="1200" height="800">
  <figcaption>The bridge on a typical summer morning.</figcaption>
</figure>

The caption is visible to everyone; the alt text describes the image for people who can't see it. They shouldn't simply repeat each other.

Practice

Add a product photo of "blue canvas sneakers, side view" (800×600) that links to sneakers.html, and a decorative background pattern image (100×100).

<a href="sneakers.html">
  <img src="sneakers.jpg" alt="Blue canvas sneakers, side view" width="800" height="600">
</a>
<img src="pattern.png" alt="" width="100" height="100">