複数フォーマットでのレスポンシブ画像

レスポンシブデザインのための複数画像フォーマット配信

モダンなWeb開発では、異なる画面サイズを処理しながら、各ブラウザに正しい画像フォーマットを配信する必要があります。

picture要素パターン

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="説明">
</picture>

ブラウザのフォーマットネゴシエーションの仕組み

1. ブラウザは<source>要素を上から下に読み取る
2. type（MIMEタイプ）のサポートを確認
3. サポートされていればそのソースを使用
4. サポートされていなければ次の<source>へ
5. どのソースもマッチしない場合は<img>要素にフォールバック