HTMLのタグで実現するレスポンシブ画像対応

はじめに

スマートフォン、タブレット、PCなど多様な画面サイズに対応するには、画像をデバイスごとに最適化する必要があります。ここで役立つのが <picture> タグです。これにより、デバイスやブラウザに応じて最適な画像を配信できます。

1. タグの基本構造

<picture> タグは source 要素と img 要素を組み合わせて使い、条件に応じた画像を配信します。

<picture>
  <source srcset="image-large.jpg" media="(min-width: 1024px)">
  <source srcset="image-medium.jpg" media="(min-width: 600px)">
  <img src="image-small.jpg" alt="サンプル画像">
</picture>

• <source> 要素: 条件（メディアクエリなど）に応じて使用する画像を指定します。
• <img> 要素: フォールバックとして必ず配置し、alt 属性で代替テキストを提供します。

2. WebPやAVIFなどの次世代フォーマット対応

ブラウザが対応している場合は、高圧縮で軽量なフォーマットを優先的に配信できます。

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="高解像度のサンプル画像">
</picture>

• <source> の type 属性でフォーマットを指定すると、対応しているブラウザが最適な形式を選択します。
• 非対応ブラウザでも img 要素により JPEG などの汎用フォーマットを表示できます。

3. タグを使う利点

• ページ速度の改善につながり、SEO にもプラスの影響があります。
• データ通信量を削減でき、モバイルユーザーの体験が向上します。
• 複数フォーマット・複数解像度に柔軟に対応でき、メンテナンス性も高まります。

4. 注意点

• img タグは必ず残し、非対応ブラウザ向けのフォールバックとします。
• 画像生成の手間が増えるため、自動変換ツールやビルドパイプラインを活用して効率化しましょう。

まとめ

<picture> タグを使えば、ユーザー環境ごとに最適化された画像を配信でき、パフォーマンス・SEO・アクセシビリティすべてに良い影響を与えます。特にモバイル対応が当たり前となった今、レスポンシブ画像対応は欠かせない基本技術です。