pictureタグ

pictureは、レスポンシブイメージを表示するタグです。

解説

pictureタグを使うと、画面サイズや解像度によって画像を出し分ける事ができます。
使い方はpictureタグ内に、sourceタグとimgタグを指定します。
imgタグには表示する画像を、sourceタグにはレスポンシブの条件と対象画像を指定します。

コンテンツ・モデル

カテゴリー (自カテゴリ)	フロー・コンテンツフレージング・コンテンツエンベッディッド・コンテンツ
コンテキスト (親カテゴリ)	エンベッディッド・コンテンツを許可する場所
コンテンツ・モデル (子カテゴリ)	sourceタグ、imgタグ

属性

pictureタグには以下の属性が指定できます。

【主要グローバル属性】
属性	説明
class	クラスを指定する（例）class="hoge"
id	IDを指定する（例）id="foo"
style	スタイルを指定する（例）style="color:red;"

その他のグローバル属性値については、グローバル属性をご覧ください。

サンプル

横幅760px以上はtest1.png、320px以上はtest2.pngを表示する

<picture>
  <source media="(min-width: 760px)" srcset="test1.png">
  <source media="(min-width: 320px)" srcset="test2.png">
  <img src="test2.png">
</picture>

320px未満の場合はimgタグに定義したtest1.pngが表示されます

2倍の解像度を持つ画面の場合はtest1-2.pngを、通常の場合はtest1.pngを表示する

<picture>
  <source srcset="test1.png, test1-2.png 2x" />
  <img src="test1.png">
</picture>

レスポンシブと解像度により画像を出し分ける

<picture>
  <source media="(min-width: 760px)" srcset="test1.png, test1-2.png 2x" />
  <source media="(min-width: 320px)" srcset="test2.png, test2-2.png 2x" />
  <img src="test1.png">
</picture>

備考

pictureタグ内では、imgタグを一番最後に指定する必要があります。
pictureは、HTML5から新たに追加になったタグです。