“picture”要素:レスポンシブな画像

要素について

カテゴリー	フロー・コンテンツ、フレージング・コンテンツ、エンベディッド・コンテンツ、パルパブル・コンテンツ
利用場所	エンベディッド・コンテンツが置ける場所
内容	0個以上の“source”要素とその後に1個の“img”要素 任意でスクリプト支援要素
タグの省略	不可

“picture”要素はレスポンシブウェブデザインでレスポンシブな画像を埋め込むための要素です。

HTML5.1で新しく追加された要素で、ユーザーの閲覧環境に応じて異なる画像やファイル形式が異なる画像を出し分けることができます。

画像ファイルは子要素として配置する“source”要素と“img”要素で指定します。

どの画像を使用するかは“source”要素の“media”属性で指定され、ユーザーのビューポートやカラー・スキームなどのメディア条件によって選択されます。

ブラウザは“source”要素を記述された順番に参照していき、適切な画像ファイルが示された“source”要素が見つかればその“source”要素が示す画像を表示し、それ以降の“source”要素は無視されます。当てはまるものがない場合は最後に配置された“img”要素によって示された画像が表示されます。

子要素として必ず“img”要素を1個配置する必要があります。また、“img”要素は同じく子要素として配置されるどの“source”要素よりも後に配置しなければいけません。画像の代替テキストは“img”要素の“alt”属性によって指定します。

HTML5.1で新しく追加された要素のため一部のブラウザでは対応していない場合があります。対応していないブラウザでは“picture”要素の中に配置された“img”要素によって示された画像が表示されます。

サンプルコード

ビューポートの横幅に応じて画像を出し分ける

<p>

<picture>

<source media="(max-width: 320px)" srcset="sample-320-sp.png">
<source media="(max-width: 640px)" srcset="sample-640.png">
<source media="(min-width: 640px)" srcset="sample-1280.png">
<img src="sample-640.png" alt="サンプル画像">

</picture>

</p>

表示サンプルはリンク先を参照

カラー・スキームに応じて画像を出し分ける

<p>

<picture>

<source media="(prefers-color-scheme: dark)" srcset="sample-dark.png">
<img src="sample-light.png" alt="サンプル画像">

</picture>

</p>

表示サンプルはリンク先を参照

ファイル形式が異なる画像を出し分ける

<picture>

<source srcset="sample.svg" type="image/svg+xml">
<img src="sample.png" alt="サンプル画像">

</picture>

属性と値

レスポンシブイメージ

多くのウェブサイトで取り入れられるようになっている“レスポンシブウェブデザイン”ですが、レスポンシブウェブデザインでは大きなディスプレイを持つデスクトップデバイスとそれに比べて小さなディスプレイを持つモバイルデバイスの両方に対応する必要があります。

例えば、デスクトップデバイスのように横幅が広いディスプレイに表示されることを想定した画像はディスプレイの横幅が狭いモバイルデバイスでは画像の主題が小さくてわかりにくくなってしまいます。この場合クロップ(切り抜き)した画像を表示させることでモバイルデバイスでも画像の主題をわかりやすく見せることができます。

また、従来のレスポンシブウェブデザインではデスクトップデバイス用に用意した大きな画像をそのままディスプレイの小さいモバイルデバイスでも縮小して表示させたり、CSSやJavascriptを使用して表示する画像を出し分けていましたが、これらの方法では必要以上に大きな画像や不要な画像を読み込んだり、コードが複雑になったりする欠点がありました。

この欠点を解決するのがユーザーの閲覧環境に応じて複数の画像ファイルの中から最適な画像ファイルのみを選択して画像読み込むレスポンシブな画像、“レスポンシブイメージ”です。

レスポンシブイメージはHTML5.1から新しく追加された“picture”要素と“img”要素の“srcset”属性と“sizes”属性によって実現することができます。

仕様書

“picture”要素はHTML5.1から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

定義されている仕様書

<picture>