pictureタグの役割と使い方｜WebP・AVIFと画像フォーマット切り替えの仕組み

レスポンシブ画像というとsrcsetがよく使われますが、もう一つ重要な仕組みがpictureタグです。

srcsetが「画像サイズ」を切り替える仕組みなのに対し、pictureは画像フォーマットや画像内容を切り替える仕組みです。

この違いを理解すると、レスポンシブ画像の構造がはっきり見えてきます。

pictureタグとは何か

pictureタグは、複数の画像候補を定義し、ブラウザが最適なものを選ぶ仕組みです。

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

この場合、ブラウザは次の順で画像を判断します。

• AVIFに対応しているか
• WebPに対応しているか
• どちらも不可ならJPEG

つまりpictureタグは、ブラウザ対応に応じて画像を切り替える仕組みです。

なぜpictureが必要なのか

画像フォーマットにはそれぞれ特徴があります。

新しいフォーマットほど軽量ですが、すべてのブラウザが対応しているわけではありません。

そのため、対応ブラウザには軽い画像を配信し、未対応ブラウザには従来フォーマットを配信する必要があります。

これを実現するのがpictureタグです。

pictureとsrcsetの違い

pictureとsrcsetは似ていますが、役割が異なります。

つまり、「サイズ最適化 → srcset」「フォーマット切替 → picture」という関係になります。

実務ではこの2つを組み合わせて使うことも多くあります。

pictureでsrcsetを使う例

pictureの中でもsrcsetは使用できます。

<picture>
<source
type="image/webp"
srcset="image-480.webp 480w, image-800.webp 800w"
sizes="(max-width: 768px) 100vw, 800px">

<img
src="image-800.jpg"
srcset="image-480.jpg 480w, image-800.jpg 800w"
sizes="(max-width: 768px) 100vw, 800px"
alt="">
</picture>

この場合、以下切り替えた上でさらにその中でsrcsetによるサイズ選択が行われます。

1. WebP対応ブラウザ → WebPを使用
2. 未対応ブラウザ → JPEGを使用

pictureのもう一つの用途

アートディレクション

pictureはフォーマット切替だけでなく、画像の構図を変える用途でも使われます。

• PC → 横長写真
• スマホ → 縦トリミング写真

例えば上記のように切り替えることができます。

<picture>
<source media="(max-width: 768px)" srcset="image-mobile.jpg">
<img src="image-desktop.jpg" alt="">
</picture>

これをアートディレクションと呼ぶようです。

画像フォーマット対応にはpictureが有効

画像レスポンシブというとsrcsetによるサイズ切替が中心になりますが、パフォーマンスの観点では画像フォーマットも重要です。

現在のPageSpeed Insightsでは、「WebP」「AVIF」などの次世代フォーマットの利用が推奨されています。これらはJPEGよりも高い圧縮率を持ち、画像サイズを大きく削減できます。しかし、すべての環境が対応しているわけではありません。

そのため実務では、次のような構成が必要になります。

• WebP / AVIF を優先配信
• 未対応ブラウザには JPEG を配信

このフォーマット切替を安全に実装できるのがpictureタグです。つまりpictureは、パフォーマンス最適化と互換性を両立するための仕組みと言えます。

画像フォーマット最適化で重要になるpicture

pictureタグは、レスポンシブ画像の中でも フォーマット切替を担当する仕組みです。
役割を整理すると次のようになります。

• srcset → 画像サイズの最適化
• picture → 画像フォーマットや構図の切替

この2つを理解すると、レスポンシブ画像の構造が明確になります。