<picture></picture>

ブラウザ
  • Cr
  • Fx
分類 フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ
利用場所 エンベッディッド・コンテンツが置ける場所
内容 source要素を0個以上、その後にimg要素 / スクリプトサポート要素

picture要素は、レスポンシブイメージ(画像内容の最適化)を文書内に埋め込みます。

サイズや内容の異なる複数の画像候補を用意しておくことで、ユーザーの閲覧環境に適した画像が表示されるようになります。

  • この要素はHTML 5.1で追加されました。

<picture>

<source media="(min-width: 1280px)" srcset="large.jpg">
<source media="(min-width: 640px)" srcset="medium.jpg">

<img src="small.jpg" alt="サンプル">

</picture>

画像表示を最適化するレスポンシブイメージは、img要素またはpicture要素で設定することができます。それぞれの特徴は次のようになります。

img要素による設定
同じ内容の画像で、サイズ違いをセットしたい場合に使用します。条件の設定は可能ですが、実際にどの画像が使用されるかはブラウザ側に任されています。img要素だけで設定できるので、比較的シンプルに(?)記述することができます。
picture要素による設定
サイズ違いだけでなく、内容の異なる画像をセットしたい場合に使用します(例えば、スマホ向けにはクロップされた画像を表示させたい場合など)。picture要素による設定では、指定した条件下で強制的に画像を切り替えることができます。
  • 上記の2つを組み合わせることで、より詳細に設定することも可能です。

picture要素について

picture要素は、画像候補のコンテナとして機能するだけです。レスポンシブイメージに関する細かい設定は、この要素内に配置するsource要素img要素で行うことになります。

  • picture要素内には、img要素の配置が必須となります(source要素の後に置きます)。レスポンシブイメージに対応していないブラウザでは、このimg要素のsrc属性で指定した画像が表示されることになります。

source要素について

source要素には以下の属性を指定することができます。

  • これは、source要素picture要素内に配置した場合のものです。video要素audio要素内に配置する場合とは異なりますのでご注意ください。
<source media="(max-width: 320px)" srcset="small.jpg 320w" sizes="100vw">
属性
必須属性
srcset="" [5.1]画像の候補 URL 画像ファイルのURL
URL 横幅w ビューポートの幅による切り替え: 画像ファイルのURL、画像ファイルの横幅(ピクセル数)、記述子(w
URL 比率x デバイスピクセル比による切り替え: 画像ファイルのURL、比率を示す数値、記述子(x
任意属性
type="" 画像のMIMEタイプ MIMEタイプ 画像のMIMEタイプを指定
media="" [5.1]対象とするメディア メディアクエリ 画像の埋め込み対象とするメディアを指定
sizes="" [5.1]ブレイクポイント、画像の表示サイズ メディアクエリ 表示サイズ(vw メディアクエリ、画像の表示サイズ(横幅)、割合で指定する場合は vw
  • srcset属性picture要素内でのみ使用することができ、これは必須属性となります。
  • srcset属性で画像の横幅( w )を指定する場合は、sizes属性の指定も必要となります。

srcset属性sizes属性の詳細については、下記のページを参考にしてください。

レスポンシブイメージの設定方法

基本的な記述方法は次のようになります。

まず、source要素にメディアクエリと画像候補をセットして、その条件下で表示される画像を設定します。(必要に応じて複数のsource要素を配置します)

続いて、source要素の後にimg要素を配置して、デフォルトで表示される画像をセットします。

<picture>

<source media="(min-width: 640px)" srcset="image/medium.jpg">

<img src="image/small.jpg" alt="サンプル">

</picture>

上記は、ビューポート(ブラウザの表示領域)の幅が640px以上の場合は medium.jpg、それ以外の場合は small.jpg を表示する、という指定になります。

クロップされた画像の使用

次の例では、スマホ向けの画像候補として、クロップされた画像crop.jpg)をセットしています。

<picture>

<source media="(max-width: 420px)" srcset="image/crop.jpg 420w" sizes="100vw">
<source media="(max-width: 1280px)" srcset="image/medium.jpg 640w, image/large.jpg 1280w" sizes="100vw">

<img src="image/large.jpg" alt="サンプル">

</picture>

上記は、ビューポートの幅が420pxまでは crop.jpg を幅100%で表示、421~1280pxまでは medium.jpglarge.jpg のどちらかを幅100%で表示、それ以外の場合は large.jpg を画像ファイルの幅(1280px)で表示する、という指定になります。

  • この場合、source要素単位の切り替えは強制的に行われますが、source要素内にセットされた画像候補(上記の例では medium.jpglarge.jpg)の切り替えはブラウザ側に依存することになります。

上記の内容は次のように記述することもできます。

<picture>

<source media="(max-width: 420px)" srcset="image/crop.jpg 420w" sizes="100vw">

<img src="image/large.jpg" srcset="image/medium.jpg 640w, image/large.jpg 1280w" sizes="(max-width: 1280px) 100vw, 1280px" alt="サンプル">

</picture>

デバイスピクセル比の指定

次の例では、ビューポートの幅デバイスピクセル比に応じて画像を切り替えています。

<picture>

<source media="(max-width: 499px)" srcset="image/small_300.jpg 1x, image/small_600.jpg 2x">

<img src="image/medium_500.jpg" srcset="image/medium_500.jpg 1x, image/medium_1000.jpg 2x" alt="サンプル">

</picture>

一般的なディスプレイでは、ビューポートの幅が500px未満の場合は small_300.jpg、それ以外の場合は medium_500.jpg が表示されます。高画素密度のディスプレイでは、それぞれ small_600.jpg または medium_1000.jpg が表示されます。

使用例

ビューポートの幅に応じて画像を切り替える例(1)

<picture>

<source media="(min-width: 1280px)" srcset="image/large.jpg">
<source media="(min-width: 640px)" srcset="image/medium.jpg">

<img src="image/small.jpg" alt="サンプル">

</picture>

<p>3の画像候補をセットしたシンプルなレスポンシブイメージです。表示サイズは指定していないので、画像がそのままの大きさで表示されます。</p>

表示例

サンプル画面へ新規ウィンドウで表示

  • 対応しているブラウザでは、ブラウザの幅を動かすことで画像の切り替えを確認することができます。
ビューポートの幅に応じて画像を切り替える例(2)

<picture>

<source media="(max-width: 420px)" srcset="image/crop.jpg 420w" sizes="100vw">

<img src="image/large.jpg" srcset="image/medium.jpg 640w, image/large.jpg 1280w" sizes="(max-width: 1280px) 100vw, 1280px" alt="サンプル">

</picture>

<p>ビューポートの幅が420px未満の場合は、クロップされた画像に切り替わります。また、ビューポートの幅が1280pxまでは100%の幅で、それ以上の場合は1280pxの幅で画像を表示します。</p>

表示例

サンプル画面へ新規ウィンドウで表示

  • Firefoxで確認すると切り替わりが分かりやすいです。