Responsive Images Done Right: srcset, Sizes, and the Widths That Matter

The single largest thing on most web pages is an image that is bigger than it needs to be. Not badly compressed — just wider than any device will ever display it. A 3000px hero shipped to a phone that renders it at 390px wastes most of the bytes it downloads, and it does so on exactly the connections least able to afford it.

The fix is srcset, and it is less complicated than its reputation suggests.

Pick a small set of widths, not a continuum

You do not need a variant for every device. Three or four widths per image cover nearly every real case. A reasonable default ladder is 480, 960, 1440, and 1920 pixels wide — roughly doubling, which matches how device pixel ratios actually cluster.

The rule of thumb: your largest variant should be about twice the widest CSS width the image will ever occupy, to serve high-density screens. Anything beyond that is invisible to the eye and expensive on the wire.

srcset tells the browser what exists; sizes tells it how big

This is the part people get wrong. srcset is an inventory — here are the files and their real pixel widths. sizes is a promise about layout — at this viewport, the image will be displayed this wide. The browser combines the two with the device pixel ratio and picks a file before any CSS has been applied.

Which means: if you omit sizes, the browser assumes the image spans the full viewport width and will happily download the largest variant for a thumbnail. An incorrect sizes value is worse than a slightly coarse set of widths.

Format and width are separate decisions

Resizing solves "too many pixels". Format choice solves "too many bytes per pixel". Do both:

• Photographs: WebP or AVIF, with JPEG as the fallback if you still support anything ancient.
• Screenshots, diagrams, anything with flat colour and sharp edges: PNG or WebP — JPEG will smear the text edges.
• Logos and icons: SVG, which sidesteps the whole resolution question.

Do not forget the boring attributes

Always set width and height so the browser can reserve space and avoid layout shift as images arrive. Add loading="lazy" to anything below the fold — and deliberately not to your hero image, where lazy loading delays the most important paint on the page.

How to check you got it right

1. Open your page on a phone-sized viewport with the network panel open.
2. Look at which variant each image actually fetched, not which one you expected.
3. Compare the fetched width to the rendered width. If the fetched file is more than about twice the rendered CSS width, your sizes attribute is lying.

Generating the ladder is mechanical work: resize once per width, convert to your chosen format, done. It is worth doing for your top ten images before it is worth doing for all two hundred.