HTML srcset and sizes: let the browser choose an appropriately sized image

Last updated: 4 Oct 20266 min read

tutorial

srcset with width descriptors lists candidate files, while sizes estimates the rendered width for source selection.

Use it for a real task

A receipt chart occupies almost the viewport on a phone and half a wide report on desktop. The sizes value describes that layout; the srcset candidates supply different image widths. The browser combines this information with device conditions when choosing what to fetch.

<img src="/media/receipt-chart-640.webp"
     srcset="/media/receipt-chart-640.webp 640w,
             /media/receipt-chart-1280.webp 1280w"
     sizes="(max-width: 48rem) 100vw, 50vw"
     width="640" height="360"
     alt="North had 47 reviewed receipts; South had 26">

What the markup guarantees

The application must actually generate both candidate files with the same content and valid dimensions. sizes is not a CSS rule; if it disagrees with the rendered width, the browser can choose an unnecessarily large file.

Cost and limits

More variants require storage and build work, but can cut transfer on small screens. Measure actual rendered widths and byte sizes before adding many breakpoints.

Common Mistakes

Do not mix width and pixel-density descriptors in one candidate list.
Do not omit alt because several image files exist.
A false sizes value can erase the bandwidth benefit.

Connected lessons

Style this pattern

Related CSS decisions

CSS image-set: offer resolution choices for decoration

Related CSS decisions

CSS image-rendering: preserve a pixel map's hard edges

Continue with the connected Web Development lesson: Page performance: budget the critical path and reserve layout space.

html

media