Why is the sizes attribute necessary?

The browser starts fetching images before applying CSS, so it cannot know the rendered width. sizes supplies it in advance.

When should I use picture instead of srcset?

For different crops at different widths, or for offering several file formats. srcset alone handles the same image at different sizes.

Do responsive images still need width and height?

Yes. The attributes give the browser an aspect ratio to reserve space with, which is what prevents a layout shift when the file arrives.

Glossary

Responsive images

Responsive images let a browser choose which version of an image to download, given the viewport, the screen density and the layout. The mechanism is `srcset`, listing candidate files with their widths, and `sizes`, telling the browser how wide the image will be rendered before the stylesheet has been applied. Without both, the browser has no basis for choosing, and a phone downloads the file intended for a desktop monitor.

How srcset and sizes work together

`srcset` lists candidates with their intrinsic widths: `photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w`.

`sizes` describes how wide the image will be displayed, as media conditions with lengths: `(max-width: 600px) 100vw, 50vw`.

The browser multiplies the chosen length by the device pixel ratio and picks the smallest candidate that meets it.

`sizes` is required because the browser begins fetching images before the CSS has been applied, so it cannot know the rendered width any other way.

A `srcset` without `sizes` falls back to assuming the image is the full viewport width, which usually selects a file larger than needed.

Density descriptors, the simpler case

For an image with a fixed rendered size — a logo, an avatar — `srcset` can use density descriptors instead: `logo.png 1x, logo@2x.png 2x`.

The browser picks by screen density alone, and `sizes` is not needed.

This is the right form whenever the image does not change size with the layout, and it is far simpler than the width-based form.

Mixing the two forms in one `srcset` is invalid; each image uses one or the other.

A single `x` descriptor is implied for the `src` when `srcset` uses density descriptors, so the fallback file is treated as the 1x candidate without being listed again.

When picture is needed instead

`srcset` solves resolution switching: the same image at different sizes. `<picture>` solves everything else.

Art direction: a wide crop on desktop and a square crop on mobile are different images, not different sizes of one, and `picture` with media conditions selects between them.

Format selection: `source` elements with `type` attributes let the browser pick AVIF, then WebP, then a fallback.

The two compose: each `source` inside a `picture` can carry its own `srcset` and `sizes`.

How to check it

In the browser's network panel, note which file was actually downloaded at a phone viewport width. If it is the largest candidate, `sizes` is missing or wrong.

`currentSrc` on an image element in the console reports the file the browser chose, which is the direct answer.

Compare the downloaded file's intrinsic dimensions against the rendered dimensions. A ratio much above the device pixel ratio means an oversized file.

Check that `width` and `height` attributes are present alongside, since responsive images without reserved space produce layout shifts.

Confirm the candidate list has enough steps to be useful. Two files an octave apart force the browser to round up substantially, and a list of five or six widths costs nothing at serving time.

Frequently asked questions

Why is the sizes attribute necessary?: The browser starts fetching images before applying CSS, so it cannot know the rendered width. sizes supplies it in advance.
When should I use picture instead of srcset?: For different crops at different widths, or for offering several file formats. srcset alone handles the same image at different sizes.
Do responsive images still need width and height?: Yes. The attributes give the browser an aspect ratio to reserve space with, which is what prevents a layout shift when the file arrives.

Sources

VeriFixScan crawls a site and applies its checks to every page it reaches, keeping the evidence behind each finding. Scanning one website is free.

Scan a website