picture 要素レスポンシブ・イメージを実現する
picture 要素は、所謂レスポンシブ・イメージ （Responsive images） を実現するための要素です。
picture 要素内に内包された img 要素と source 要素に srcset 属性、media 属性、sizes 属性を組み合わせて指定することで、デバイスピクセル比、ビューポート、画面サイズなどに応じた、複数のイメージソースを出し分けることが可能になります。
複数イメージソースの指定は、picture 要素内に source 要素を記述する事で行います。詳しくは source 要素の項目をご確認ください。
picture 要素の仕様
- カテゴリ
- コンテンツモデル
-
- 0個以上の source 要素に続いて、1つの img 要素。オプションで でスクリプト支援要素 （script 要素および template 要素）
- この要素を使用できる文脈
エンベッディッド・コンテンツが期待される場所
- この要素で使用できる属性
picture 要素のサンプルソース
<picture> <source srcset="sample-x1.5.png 1.5x, sample-x2.png 2x" /> <img alt="画像の説明" src="sample.png" /> </picture>