文書にレスポンシブイメージを埋め込む（画像内容の最適化）

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

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

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

img要素による設定

同じ内容の画像で、サイズ違いをセットしたい場合に使用します。条件の設定は可能ですが、実際にどの画像が使用されるかはブラウザ側に任されています。img要素だけで設定できるので、比較的シンプルに（？）記述することができます。

picture要素による設定

サイズ違いだけでなく、内容の異なる画像をセットしたい場合に使用します（例えば、スマホ向けにはクロップされた画像を表示させたい場合など）。picture要素による設定では、指定した条件下で強制的に画像を切り替えることができます。

• 上記の2つを組み合わせることで、より詳細に設定することも可能です。

picture要素について

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

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

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

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

まず、picture要素内にsource要素を配置します。

配置した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.jpg か large.jpg のどちらかを幅100%で表示、それ以外の場合は large.jpg を画像ファイルの幅（1280px）で表示する、という指定になります。

• この場合、source要素単位の切り替えは強制的に行われますが、source要素内にセットされた画像候補（上記の例では medium.jpg と large.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 が表示されます。