Use sizes="auto" to Simplify Lazy-Loaded Responsive Images
The card grid got redesigned, and every lazy image still carries a sizes list written for the old widths. What does sizes="auto" let you delete, and where does it not apply?
- For loading="lazy" images, sizes="auto" lets the browser select a srcset candidate using the rendered width.
- Keep layout dimensions in HTML and CSS, and add fallback sizes after auto where needed.
- Do not make an eager image lazy just to use auto. Inspect currentSrc to see which candidate was selected.
Lazy loading lets the browser use the layout it already knows
If your component's width is already defined in CSS, sizes="auto" can remove the duplicate breakpoint calculation for lazy-loaded images. The browser uses the rendered width when choosing a srcset candidate. Safari 27 adds support for this approach.
The benefit is particularly clear in reusable cards: changing their layout need not mean maintaining a second equivalent sizes expression for supporting browsers. The MDN image reference makes loading="lazy" a condition of using auto.
This still leaves layout sizing in HTML and CSS. Auto uses the resulting width to select a resource; it is not a general fix for images overflowing their container.
Provide candidates, dimensions and a fallback
This example assumes a card capped at 600px that can occupy the viewport width on smaller screens. Its three source files share an aspect ratio and are actually 400, 800 and 1200 pixels wide. Adjust the fallback if your page adds gutters.
<div class="photo-card">
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w,
photo-800.jpg 800w,
photo-1200.jpg 1200w"
sizes="auto, (max-width: 600px) 100vw, 600px"
loading="lazy"
width="1200"
height="800"
alt="Trees beside a walking path">
</div>
/* CSS */
.photo-card {
width: min(100%, 600px);
}
.photo-card img {
display: block;
width: 100%;
height: auto;
}The HTML standard's image examples allow ordinary source sizes after the initial auto keyword for older browsers. Dimensions provide a ratio, while CSS sets the displayed width. The w descriptors must match the real file widths.
These inputs have different jobs: srcset supplies available files, CSS controls placement, and sizes supplies the width used in selection. Adding auto does not generate missing image variants.
Keep explicit hints for images that must load immediately
Do not switch a prominent first-screen image to lazy loading just to use auto. Shopify's responsive-design guidance says eager images, including the LCP image, still need explicit sizes because source selection happens before layout.
| Situation | Action |
|---|---|
| A lazy-loaded card below the initial viewport | Use auto with an appropriate fallback list. |
| An image that should load immediately | Keep explicit sizes matched to the layout. |
| An image overflows or has the wrong proportions | Inspect CSS sizing and HTML dimensions first. |
WordPress adopted auto for lazy images in 6.7. If theme or plugin code later changes loading, inspect the resulting sizes value too. The relevant combination is the final markup delivered to the browser.
Check the layout width before checking the chosen file
Inspect the image and its container in developer tools, then read currentSrc to see the selected candidate. For the example above:
document.querySelector(".photo-card img").currentSrcThat property identifies the selected URL even if the resource has not loaded successfully. Use Network to inspect the actual request. A wrong display width calls for a layout correction; an unexpected candidate with the right layout calls for checking srcset, sizes and loading together.
Start adoption with the lazy-loaded list, retain its CSS and compare selection in supported and older browsers. Eager images remain a separate decision.