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

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

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

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

その他

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`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.

The auto keyword for sizes derives the layout width from the image slot, but it applies only when loading is lazy.

Combine auto sizing with dimensions and meaningful alt text.

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

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