One Image, Five Screen Sizes: How to Actually Use srcset and sizes in 2026

A website that serves one full-resolution image to every visitor is either wasting bandwidth on phones or shortchanging quality on large monitors — and the fix, srcset and sizes, has been part of the HTML standard for years while still being one of the most commonly misconfigured features on the modern web. Done right, it lets the browser pick the right file for the actual screen rendering it. Done wrong — usually by skipping sizes entirely — it barely helps at all.

What Actually Happens Without It

A <img> tag with a single src attribute gives the browser exactly one option: download that file, no matter what device is asking for it. A product photo sized for a large desktop hero banner gets downloaded at full resolution by a phone displaying it at a third of the width, burning mobile data and slowing the page load for exactly the visitors most likely to be on a slower connection. This is one of the most common issues Google PageSpeed Insights flags, and it's almost always fixable without touching the visual design at all.

How srcset and sizes Actually Work Together

srcset gives the browser a menu of image files at different widths:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  alt="Description of the image">

That alone tells the browser what's available, but not how big the image will actually appear on the page — which is exactly the information it needs to pick correctly. That's what sizes provides:

sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"

This tells the browser: below 600px viewport width, the image fills the full viewport; between 600 and 1200px, it takes up half; above that, it's a fixed 800px. With both attributes present, the browser can calculate the actual rendered size and download the smallest file from the srcset list that still looks sharp at that size.

The Mistake That Undoes All of It

Adding srcset without sizes is the single most common way this setup fails to deliver its benefit. Without sizes, the browser has no reliable information about how large the image will render, so it falls back to a default assumption — commonly treating the image as if it will fill the full viewport width, which is often wrong and pushes the browser toward downloading a larger file than actually necessary. The whole point of srcset is undermined by omitting the one piece of context that makes it useful.

Building This Without Overcomplicating It

1. Generate two to four widths per source image — you don't need ten variants; three well-chosen sizes (roughly mobile, tablet, and desktop scale) cover the vast majority of real-world benefit.
2. Write sizes to match your actual CSS layout, not a generic guess — if your image is genuinely full-width on mobile and half-width above a breakpoint, say exactly that.
3. Verify in browser DevTools by checking the Network tab on different simulated device widths — you should see a visibly smaller file downloaded on a narrow viewport than a wide one.
4. Pair this with modern formats, since srcset and format choice (WebP, AVIF) are two independent, stacking wins rather than alternatives to each other.

Optimage's resize tool can batch-generate multiple width variants from a single source image, which is most of the manual work involved in setting up a proper srcset correctly.

What to Take From This

srcset and sizes together solve a problem that responsive CSS alone can't touch — which actual file gets downloaded, not just how it's displayed once it arrives. It's a one-time setup cost per image template, and the payoff is every visitor after that getting a file sized appropriately for their actual screen, without anyone having to think about it again.

Related reading:

• Why Your LCP is Failing and How to Fix It Once and For All — how oversized images directly hurt this Core Web Vital
• The Complete Guide to Image Lazy Loading — the complementary technique for images below the fold
• Google PageSpeed Insights Is Flagging Your Images — where responsive image sizing ranks among the highest-impact fixes