このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

picture要素:レスポンシブな画像HTML5.1で追加

記事Jan. 8th,2019
July 7th,2020
レスポンシブな画像を埋め込む要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

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

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

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

ブラウザは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>
表示サンプルはリンク先を参照新しいウィンドウで表示します
ファイル形式が異なる画像を出し分ける
<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でも定義されています。

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<picture>
定義あり

定義あり

定義あり

定義あり

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク