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

picture

< picture 【 ピクチャー 】 >~< /picture >

picture要素は、レスポンシブ・イメージを実現するための要素です。内包されたimg要素とsource要素を組み合わせて、複数のイメージソースを出し分けることが可能になります。HTML5.1で策定中の要素ですが、ブラウザーでの実装も進んでいます。

カテゴリー ・エンベッディッドコンテンツ
・フレージングコンテンツ
・フローコンテンツ
コンテンツモデル 0個、または複数のsource要素に続いて、1つのimg要素。オプションでスクリプト支援要素（script要素およびtemplate要素）。
使用できる文脈 エンベッディッドコンテンツが期待される場所
カテゴリーとコンテンツモデル

使用できる属性

グローバル属性

すべての要素で使用できる属性です。
グローバル属性とイベントハンドラ属性

サンプルコード

source要素にsrcset属性を指定することで、閲覧するデバイスのピクセル比、ビューポート、画面サイズなどに応じて、指定した画像が表示されます。

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

関連記事