<img sizes="auto" loading="lazy">
The sizes property of the HTMLImageElement interface allows you to specify the layout width of the image for each of a list of media queries, or auto for lazy-loaded images to allow the browser to automatically select an image to display based on the layout size of the element. This allows the browser to choose between different images specified in the element srcset to match different media conditions — even images with different orientations or aspect ratios.
The sizes property reflects the <img> element's sizes content attribute. It can only be present when srcset uses width descriptors.
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.
Auto sizing note
The auto keyword for sizes derives the layout width from the image slot, but it applies only when loading is lazy.
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.