The sizes attribute in responsive images

What sizes does

The sizes attribute tells the browser how wide an image will be rendered, at each viewport that matters, before the image has loaded. That prediction is what lets the browser pick from a srcset with width descriptors: a w descriptor describes the file's pixel width, and sizes describes the display width, so the browser can choose the smallest file that will not look blurry.

Without a sizes attribute, a width-based srcset assumes the image fills the whole viewport, 100vw, and the browser downloads far more pixels than a card-sized image needs. On a page where every image is a full-width hero that default is close to correct; on a grid or a side column it is wastefully wrong. This attribute is therefore the silent workhorse: easy to miss, expensive to omit.

The sizes list

sizes is a comma-separated list of media condition and length pairs, read left to right. The first pair whose media condition matches wins. A classic example:

<img
  src="hero.jpg"
  srcset="hero-480.jpg 480w, hero-960.jpg 960w, hero-1600.jpg 1600w"
  sizes="(min-width: 900px) 50vw, 100vw"
  alt="A visitors' guide to the main square">

On a 1400px viewport, (min-width: 900px) matches, the slot is 50vw, which is 700px, and the browser picks the first candidate at or above 700px, the 960w file. On a 500px phone, no media condition matches, the fallback 100vw gives a 500px slot, and the browser picks the smallest candidate at or above 500px, the 960w file (it has no candidate between 480 and 960). If the phone slot were 400px, the 480w file would win.

Important mechanics:

• The last entry (the fallback) has no media condition; the list ends with a plain length.
• sizes only selects the source; CSS width controls the actual rendered layout.
• Add width and height attributes on the element so the browser can compute the ratio before the image arrives, which the aspect-ratio guide expands.

When not to use it

If the image renders at a fixed size in your layout (a logo, an icon, a fixed sidebar image), skip width-based srcset entirely and let the browser pick from a 2x-style density list, which has no need for sizes. The x descriptor case is the simpler one from the srcset guide, and mixing w and x in one srcset is invalid, so choose the model once per image.

There is also the modern auto alternative: sizes="auto" lets the browser start from the image's intrinsic size and correct itself after the first load, which works with lazy-loaded images and removes the manual width math. auto is not yet universal everywhere, so keep the explicit list for broad support.

Expensive mistakes

• Writing sizes="100vw" on a thumbnail grid justifies downloading the 1600px image on every phone.
• Mixing w and x descriptors in one srcset, which browsers treat as a malformed value.
• Omitting the fallback length and sending the browser an empty list.
• Using CSS-only to resize (no size attribute), which leaves unreserved space and hurtful CLS. The layout shift article covers the fix.

The rule of one: describe the slot honestly, and let the browser select the file. When in doubt, measure the rendered width with DevTools and compare it to your sizes value.

Prevention

Review any new template's images with the sizes attribute in mind, then use the per-step slot to pick the descriptor width. Preloading a hero with the imagesrcset and imagesizes attributes on a <link rel="preload"> keeps the prediction honest during the hero load, and your audit re-runs stay clean.