Responsive images with srcset, sizes and picture

What it is

The MDN responsive-images guide separates two problems. Resolution switching: the same picture should be delivered as a smaller file to a small or low-density screen and as a larger file to a large or high-density one. Art direction: a different crop or composition is wanted at different layouts, for example a tight portrait crop on phones.

Resolution switching uses srcset on img. With width descriptors, each candidate states its intrinsic width (hero-800.jpg 800w, hero-1600.jpg 1600w) and sizes tells the browser how wide the slot will be, as a list of media conditions with a length each and a final default ((max-width: 600px) 100vw, 50vw). The guide notes that percentages are not allowed as slot widths, that vw is, and that the browser uses the first matching condition and ignores the rest, so order matters. The img reference adds that sizes is only meant to be present when srcset uses width descriptors. For an image displayed at a fixed CSS size, density descriptors (icon.png 1x, icon@2x.png 2x) are simpler.

Art direction uses <picture> with <source media="…" srcset="…"> children and an img fallback; the same element with <source type="image/avif"> provides format fallback, since the browser skips types it cannot decode.

Why it matters

Images are commonly the largest share of a page's bytes, and a phone downloading a desktop hero image wastes bandwidth and delays rendering. MDN notes that the browser starts downloading images before the main parser has loaded the page's CSS and JavaScript, so choosing at the markup level lets the right download start early.

How to apply

• Generate three to five widths per image at build time and list them all; let the browser choose. Name files by width to keep srcset readable.
• Write sizes from the actual CSS layout; a wrong sizes silently picks oversized files. Recheck it when the layout changes.
• Always set width and height attributes (or aspect-ratio in CSS) so space is reserved before the image arrives.
• Use loading="lazy" for images below the fold and decoding="async" where the image is not needed for the first paint; keep the above-the-fold hero eager.
• Keep alt meaningful; responsive markup does not change accessibility rules.

Pitfalls

srcset is a hint: MDN states that the user agent selects any of the available sources at its discretion, so a browser may keep using a larger cached candidate rather than fetch a smaller one. sizes is evaluated before CSS for the image has necessarily loaded, so values must be self-contained. Mixing width and density descriptors in one srcset is invalid. Background images in CSS need image-set() or media queries instead.