Browsers ship `sizes="auto"` — fully automatic responsive images are finally here
All major browsers now support `sizes="auto"` on responsive images, which means the most painful part of the responsive image spec is finally going away. The auto value lets the browser compute the rendered size of the image based on the actual layout, eliminating the hand-tuned media-query strings that have been a tax on every responsive site since the responsive images spec landed a decade ago.
What was wrong with sizes before
The sizes attribute exists to tell the browser how wide an image will be rendered, so the browser can pick the right source from srcset. The problem is that sizes had to be calculated by the developer at build time, using a media-query string that describes the layout: sizes="(min-width: 1200px) 800px, (min-width: 768px) 50vw, 100vw". That string had to match the actual CSS that determined the image's rendered width.
Two bad things happened. First, the sizes string and the CSS drifted apart every time the layout changed, which meant images requested the wrong source. Second, computing the right string was tedious enough that most developers just wrote sizes="100vw" and accepted the bandwidth waste of over-downloading images on every viewport that wasn't full-width.
How auto fixes it
With sizes="auto", the browser measures the image's rendered width after layout and uses that value as the sizes hint. The catch is that the image has to be lazy-loaded (loading="lazy") for auto to work, because the browser needs to wait until the image's layout box is known before deciding which source to request. For above-the-fold images, the old explicit sizes pattern is still required.
For below-the-fold images — which is most images on most pages — auto is now the right answer. The markup becomes <img srcset="..." sizes="auto" loading="lazy" alt="..."> and the browser handles the rest. Build tooling that generates srcset attributes can stop trying to predict layouts and just emit the auto value.
The migration path
There's no need to migrate existing markup unless you want to. Explicit sizes still works correctly across all browsers. The win from migrating is removing the maintenance burden of keeping sizes strings in sync with CSS, which is most valuable in CMS-driven sites where the layout context of an image isn't fully known when the image is published.
For new builds, the recommendation is to default to sizes="auto" for lazy-loaded images and reserve explicit sizes for above-the-fold images where the browser can't wait for layout. Most static site generators and image CDNs are still emitting explicit sizes by default, so you'll need to override the default in your build config. Expect that default to flip over the next year.