★HTML Living Standard リファレンス

<picture> …… 画像リソースの選択肢を提供する

<picture>タグは、画像リソースの選択肢を提供する際に使用します。

picture要素内で複数の画像リソースを指定しておくことで、ブラウザが利用する画像リソースの選択肢を提供できます。
具体的には、picture要素の子要素にsource要素を配置してsrcset属性の値に画像リソースのURLを指定します。

source要素のsrcset属性と同時にmedia属性を指定することで、画面のピクセル密度、ビューポートサイズ、画像形式などに応じて、
ブラウザがどんな環境でどの画像リソースを利用するかを指定できます。

複数のsource要素の後にはimg要素を配置します。
source要素の後に配置するimg要素は、source要素で指定したいずれの条件にも合致しない場合にデフォルト表示されます。

■使用例

以下のサンプルは、メディアの画面幅に応じて利用する画像リソースを切り替えるように指定しています。
パソコンでご覧の場合には、ブラウザの横幅を変更してみてください。

HTMLソース

<picture>
 <source srcset="./sample/pear-mobile.jpg" media="(max-width: 720px)">
 <source srcset="./sample/pear-pc.jpg" media="(max-width: 1280px)">
 <img src="./sample/pear-desktop.jpg" alt="洋ナシはジューシーです。">
</picture>

↓↓↓

ブラウザ上の表示

picture要素自体は何も表示しない

picture要素は、video要素やaudio要素とはリソース選択のアルゴリズムが異なります。
要素内にsource要素を配置する点は同じですが、picture要素内に配置されたsource要素のsrc属性は意味を持ちません。

picture要素は、子要素のsource要素によってimg要素のURLを提供するだけのコンテナ要素です。
あくまでも画像リソースの選択肢を提供するのが役割で、picture要素自体は何も表示しません。

■関連項目