Images & Media›Extra· 30 min read

Figures, Captions & Responsive Images

Caption images properly and serve the right image size for each screen.

What you will learn

Pair an image with a caption using <figure> and <figcaption>
Make images shrink to fit small screens
Meet <picture> for responsive images

Images with captions

Wrap an image and its caption in <figure>, with the caption text in <figcaption>.

<figure> groups an image with its caption

<figure>
  <img src="https://picsum.photos/400/220" alt="A mountain lake at sunrise" width="400">
  <figcaption>Sunrise over the lake — our 2026 retreat.</figcaption>
</figure>

Live preview

The <figure> wraps the picture and its label together as one unit, and <figcaption> holds the caption text shown beneath the image. Grouping them tells the browser and screen readers “this caption belongs to this image”.

Note: Output: The lake image, with the line “Sunrise over the lake — our 2026 retreat.” shown just below it as a caption.

Make images flexible

A simple inline style makes an image shrink to fit its container so it never overflows on a phone.

max-width: 100% keeps images inside the screen

<img src="https://picsum.photos/1000/400"
     alt="Wide banner"
     style="max-width: 100%; height: auto;">

Live preview

The image is naturally 1000 pixels wide. max-width: 100% says “never grow wider than the space available”, so on a narrow phone it shrinks to fit instead of spilling off the edge. height: auto keeps the proportions correct as it shrinks. Drag the preview narrower to watch it adjust.

Note: Output: A wide banner that fills the available width on large screens and shrinks neatly to fit on small ones — never overflowing.

Different images for different screens

The <picture> element lets the browser pick the best image source for the screen size — you will use this more once you know CSS.

<picture> serves the right image

<picture>
  <source media="(min-width: 600px)" srcset="https://picsum.photos/600/200">
  <img src="https://picsum.photos/300/200" alt="Responsive banner" style="max-width:100%">
</picture>

Live preview

Inside <picture>, the <source> gives a rule: when the screen is at least 600px wide, use the larger 600-wide image. If that rule does not match (a smaller screen), the browser falls back to the plain <img> — the smaller 300-wide image. So each visitor downloads the size that suits their screen.

Note: Output: On wide screens the 600px-wide banner loads; on narrow screens the smaller 300px-wide banner loads instead.

Q. Which inline style stops an image overflowing on small screens?

Answer: max-width: 100% lets the image shrink to fit its container; height: auto keeps the proportions.

✍️ Practice

Add a captioned image using <figure> and <figcaption>.
Add a wide image with max-width: 100% and resize the browser to watch it shrink.

🏠 Homework

Build a small gallery of three captioned figures, each image flexible to the screen width.