picture element ／ ピクチャー要素

picture要素

<picture> に <img> は必須
・<picture> の最後に書かなければいけない

アートディレクションでの利用
・<picture> 要素が最も使われるケース
→ レスポンシブデザインにおける「アートディレクション」

アートディレクションとは？
・ひとつの画像をビューポート幅に応じて拡大縮小するのではなく、ビューポートの大きさに合わせ、予め用意した複数の画像を使用する方式

利点
・<picture> 要素、もしくは srcset 属性と sizes 属性を持つ <img> 要素を使用すると、ブラウザは明示的に指定された条件にマッチする画像のみをダウンロード

ブラウザ対応状況
・IE、Edge 未対応
・ブラウザ対応一覧




新しい picture 要素の仕様が公開、レスポンシブ・イメージ最新動向

---

<picture>要素のsource

使用すると、メディアクエリーを使って条件指定可能
・ウィンドウサイズに合わせて画像を切り替える

具体例
・ウィンドウサイズが320px以上ならsmall.jpg読込
・ウィンドウサイズが320px以上かつRetinaディスプレイならsmall@2x.jpg読込

<picture>

  <source media="(min-width: 320px)" srcset="small.jpg 1x, small@2x.jpg 2x">

  <source media="(min-width: 640px)" srcset="big.jpg 1x, big@2x.jpg 2x">

  <img src="small.jpg" alt="Example image">

</picture>