picture要素は、img要素とsource要素を子要素として持ち、画面サイズや端末に応じて表示する画像を切り替えることができる。
picture要素を使わずにimg要素のsrcset属性を使うこともできる。
ブラウザはsource要素に指定したmedia属性から適切な画像を選択する。適切なものがない場合とブラウザが非対応の場合はimg要素に指定した画像を表示する。
<picture>
<source srcset="img/640.png" media="(max-width: 640px)">
<img src="img/1024.png" alt="画像" />
</picture>picture要素の活用
画面幅に応じて内容の異なる画像を出し分けることを「アートディレクション」という。このような場合、従来はPC用とSP用のimg属性を両方HTMLに記述して、片方をdisplay: noneで非表示にする手法が取られてきたが、この方法は非表示にしている画像も最初にローディングされてしまうといった表示パフォーマンス上の問題があるため、現在は特別な事情がなければpicture要素による実装をしたほうが良い。
なお、picture要素はメディアクエリによる画面幅に応じた内容の異なる画像の出し分けだけでなく、type属性を使った複数の画像フォーマットの提供や、sizes属性を使ったよりきめ細やかなスクリーン幅環境に応じた使用画像の切替など、高度なレスポンシブイメージ対応も可能。
<figure class="mainVisual__ph">
<picture>
<source media="(max-width:767px)" srcset="img/ph_main_sp.jpg 1x, img/ph_main_sp@2x.jpg 2x">
<source media="(min-width:768px)" srcset="img/ph_main_pc.jpg">
…以下必要な分だけのsource要素…
<img src="img/ph_main_pc.jpg" width="1475" height="940" alt="###">
</picture>
</figure>- media：メディアクエリで使用する画面幅を指定
- srcset：ピクセル密度記述子でデバイスピクセル比別の画像ソースを指定
- <img>：該当する環境が無い・picture非対応環境の場合のデフォルト表示画像を指定（※必須）
