picture
new
: 画像コンテナ
✗
例
<!-- 幅45em以上の端末ではlarge.jpg、それ以下で幅32em以上はmed.jpg、それ以下はsmall.jpg -->
<picture>
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 32em)" srcset="med.jpg">
<img src="small.jpg" alt="The wolf runs through the snow.">
</picture>
<!-- 色々な形式の画像ファイルを用意し、上から利用可能なものをブラウザに表示させる -->
<picture>
<source srcset="marie.webp" type="image/webp">
<source srcset="marie.jxr" type="image/vnd.ms-photo">
<img src="marie.jpg" alt="" width="100" height="150">
</picture>
説明
現在のデバイス事情は極めて複雑だ。 PC、スマートフォン、タブレット? 幅は何ピクセルで、高さは何ピクセル? ppiは? 対応している画像のフォーマットは? こういった事情に配慮するためには、1つの画像リソースを1つの高さと幅で指定できるだけでは不十分だ。 そのため、HTML5ではこの要素とsourceの追加とimgの拡張が行われた。 端的に言うと、ものすっごく複雑になった。この要素は複数の画像リソースをグルーピングでき、ブラウザはグルーピングされた画像の中から状況に適した画像を選択する。