Limited support 一部のブラウザのみ対応。使用時はサポート状況を確認すること。

<img sizes="auto" loading="lazy">

HTMLImageElement の sizes プロパティによって、メディア条件のリストごとに、画像のレイアウト幅を指定することができます。これにより、様々なメディア条件に合わせて文書の状態が変化したときに、異なる画像（方向やアスペクト比の異なる画像も含む）を自動的に選択する機能が提供されます。

それぞれの条件は、メディアクエリーで使われているのと同じ条件指定の形式を使用します。

その他

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`html.elements.img.sizes.auto`	126	126			126

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

HTML

<img src="photo.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w"
  sizes="auto"
  loading="lazy"
  alt="自動サイズ計算の画像">

Combine loading="lazy" with sizes="auto" for layout-based source selection.

Explain that sizes auto works only with lazy-loaded images.

Combine auto sizing with dimensions and meaningful alt text.

<img sizes="auto" loading="lazy"> の活用

HTMLImageElement の sizes プロパティによって、メディア条件のリストごとに、画像のレイアウト幅を指定することができます。