picture  new : 画像コンテナ ie ✗

カテゴリ

例

<!-- 幅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の拡張が行われた。 端的に言うと、ものすっごく複雑になった。

この要素は複数の画像リソースをグルーピングでき、ブラウザはグルーピングされた画像の中から状況に適した画像を選択する。