Responsive Images: srcset and sizes Explained

Responsive images give the browser more than one file to choose from. Instead of sending the same 2400px image to every screen, you offer several widths and describe how wide the image will appear in the layout.

The browser then picks a candidate based on the viewport, the sizes rule, and device pixel density. That choice happens before the image downloads, which is why the markup matters.

After deciding the widths you need, generate the files with the Image Resizer and wire them into srcset.

The core problem

A desktop hero image can be much larger than a phone needs. If the same file is used everywhere, mobile users pay for pixels they never see.

A responsive image setup solves that by providing candidates:

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w, hero-1600.jpg 1600w"
  sizes="(max-width: 700px) 100vw, 700px"
  alt="Workshop table with a laptop and notebook"
/>

The src is the fallback. The srcset lists available files. The sizes attribute tells the browser how much layout space the image will occupy.

srcset lists candidates

Each srcset item has a URL and a width descriptor:

srcset="photo-480.jpg 480w, photo-960.jpg 960w, photo-1440.jpg 1440w"

The 480w value describes the actual pixel width of that file. It is not the CSS display width.

Do not lie in width descriptors. If photo-960.jpg is actually 1200px wide, the browser’s selection math is wrong and it may download more than the layout needs.

sizes describes layout width

sizes answers a different question: how wide will the image be when rendered?

sizes="(max-width: 768px) 100vw, 50vw"

This says:

• at viewport widths up to 768px, the image renders at full viewport width
• above that, it renders at half the viewport width

The browser combines that rendered width with pixel density. On a 2x display, a 500px rendered image may need a 1000px candidate to look sharp.

If you omit sizes, browsers assume 100vw for width-descriptor srcset. That can cause larger downloads when the image is actually a narrow column or card.

picture handles formats and art direction

Use <picture> when you need different formats or different crops.

For format fallback:

<picture>
  <source type="image/avif" srcset="hero-800.avif 800w, hero-1600.avif 1600w" />
  <source type="image/webp" srcset="hero-800.webp 800w, hero-1600.webp 1600w" />
  <img src="hero-800.jpg" alt="Mountain lake" width="800" height="533" />
</picture>

For art direction:

<picture>
  <source media="(max-width: 700px)" srcset="portrait-crop.jpg" />
  <img src="landscape-crop.jpg" alt="Product on a desk" />
</picture>

Use art direction when the mobile image needs a different crop, not merely a smaller file.

Pick width steps intentionally

You do not need ten versions of every image. Use enough widths to avoid large jumps.

A good starting set for content images:

400, 800, 1200, 1600

For full-width heroes, add a larger size only if the design uses it:

800, 1200, 1600, 2000

For thumbnails and cards, smaller widths are enough:

240, 480, 720

Generate widths from the final crop, not from the uncropped original. Crop first, resize second.

Test the selected file

Chrome and Edge DevTools can show which candidate downloaded:

1. Open DevTools.
2. Go to Network.
3. Filter by Img.
4. Reload the page.
5. Resize the viewport and reload again.

Check the transferred file name and dimensions. If a 1600px file downloads for a 360px card, the sizes value is probably wrong.

Also set explicit width and height on the image or reserve space with CSS. Responsive image selection saves bytes; reserved dimensions prevent layout shift.

Responsive images vs progressive JPEGs

Responsive images reduce unnecessary bytes by choosing a smaller file. Progressive JPEGs change how a JPEG appears while it downloads.

They solve different problems:

• use responsive images when one layout needs multiple display sizes
• use progressive JPEGs when large photos leave blank space during loading
• use both for large JPEG hero images when the page benefits from each

For JPEG delivery, you can resize first, then convert the chosen outputs to progressive JPEG if the visual loading behavior matters.

The rule

Give the browser accurate candidates and accurate layout information. srcset without a truthful sizes value is only half the job.