HTML Tag Reference

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>

主要ブラウザの対応

関連する要素

仕様書の該当箇所

用途から目的の要素を探す

用途から HTML 要素を逆引きできます。