sizes="auto" paired with loading="lazy" eliminates manual responsive image math that has plagued web authoring for 14 years.
Key Takeaways
The sizes attribute has required authors to calculate pixel widths per breakpoint; auto delegates that to the browser.
loading="lazy" is a prerequisite for sizes="auto" to function, linking lazy loading and responsive sizing as a combined feature.
Mat Marquis, who helped define the original responsive images spec, frames this as the resolution of a long-standing authoring burden.
The srcset workflow remains: multiple image variants at different widths still need to be generated and listed.
Hacker News Comment Review
Skepticism that this is a genuine solution: the markup still requires a full srcset list and the auto keyword reads more like a convenience layer than a structural fix.
Image Seam Carving came up as a technique that was never adopted by browsers, seen as a missed alternative to the multi-file srcset model.
Notable Comments
@mrbluecoat: posts the full markup to show sizes="auto" still lives alongside a manual srcset and fallback calc expression, calling it “more like a polyfill than a final industry solution.”