<img sizes="auto" loading="lazy">
The sizes="auto" attribute for the <img> HTML element sets the layout size for the image based on the computed layout size when choosing a source from the srcset. This attribute only applies to images with the loading="lazy" attribute. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The sizes="auto" attribute for the <img> HTML element sets the layout size for the image based on the computed layout size when choosing a source from the srcset. This attribute only applies to images with the loading="lazy" attribute. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 126 | 126 | | | 126 | | |
Syntax
<img src="photo.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w"
sizes="auto"
loading="lazy"
alt="自動サイズ計算の画像">Live demo
Lazy image with sizes auto
Combine loading="lazy" with sizes="auto" for layout-based source selection.
Responsive image checklist
Combine auto sizing with dimensions and meaningful alt text.
Use cases
Use <img sizes="auto" loading="lazy">
Use <img sizes="auto" loading="lazy"> when standard HTML needs a more specific platform feature, semantic signal, or browser capability.
Handle edge cases
Apply <img sizes="auto" loading="lazy"> to solve a focused requirement without redesigning the whole page architecture.
Cautions
- Test <img sizes="auto" loading="lazy"> in your target browsers and input environments before depending on it as a primary behavior.
- Provide a fallback path or acceptable degradation strategy when support is still limited.
Accessibility
- Make sure <img sizes="auto" loading="lazy"> supports the intended task without making the page harder to perceive, understand, or operate.
Related links
Powered by web-features