picture 要素レスポンシブ・イメージを実現する

picture 要素は、所謂レスポンシブ・イメージ (Responsive images) を実現するための要素です。

picture 要素内に内包された img 要素source 要素に srcset 属性、media 属性、sizes 属性を組み合わせて指定することで、デバイスピクセル比、ビューポート、画面サイズなどに応じた、複数のイメージソースを出し分けることが可能になります。

複数イメージソースの指定は、picture 要素内に source 要素を記述する事で行います。詳しくは source 要素の項目をご確認ください。

picture 要素は、現状 HTML5.1 仕様書 (HTML 5.1 Nightly) で策定中の要素です。最新の W3C 勧告である HTML5 仕様書 (HTML5 W3C Recommendation 28 October 2014) には含まれませんので注意してください。

サンプルソースを見る

picture 要素の仕様

カテゴリ
コンテンツモデル
  • 0個、または複数の source 要素に続いて、1つの img 要素。オプションで Script-supporting 要素 (script 要素および template 要素)
この要素を使用できる文脈

エンベッディッド・コンテンツが期待される場所

この要素で使用できる属性
DOM インタフェース
interface HTMLPictureElement : HTMLElement {};

picture 要素のサンプルソース

<picture>
  <source srcset="sample-x1.5.png 1.5x, sample-x2.png 2x" />
  <img alt="画像の説明" src="sample.png" />
</picture>

W3C HTML5 仕様書

4.7.3 The picture element