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

概要

sizes="auto" は loading="lazy" の画像で、ブラウザがレイアウト後の実際の表示サイズから sizes 値を自動的に決定します。

対応ブラウザ

基本構文

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

実務での使いどころ

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

  sizes=auto。遅延読み込み画像のsizes属性を自動計算する機能。

注意点

アクセシビリティ

• スクリーンリーダーでの読み上げを確認すること。

参考リンク

• MDN Web Docs — <img sizes="auto" loading="lazy">