レスポンシブイメージを設定する（画像サイズの最適化）

img要素に srcset="" と sizes="" を追加すると、レスポンシブイメージ（画像サイズの最適化）を設定することができます。

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

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

img要素による設定

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

picture要素による設定

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

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

srcset属性とsizes属性の概要は次のようになります。

srcset属性

使用される画像の選択候補を設定します。それぞれの画像候補には、画像ファイルの横幅（ w ）またはデバイスピクセル比（ x ）のどちらかを指定することができます。

sizes属性

画像の表示サイズ（横幅）を指定します。割合で指定する場合は % ではなく vw 単位を使います。メディアクエリを加えることで、ブレイクポイント（切り替え地点）を設定することもできます。

• 上記2つの属性に対応していないブラウザでは、src属性で指定した画像が表示されます。
• sizes属性を指定する場合は、srcset属性にセットされる全ての画像候補に画像ファイルの幅を指定しておく必要があります。（デバイスピクセル比を指定した場合はsizes属性は無効となります）

srcset属性の指定方法

srcset属性の値には、サイズの異なる1つ以上の画像候補をセットすることができます。2つ以上の画像をセットする場合はカンマ（ , ）で区切って記述します。

srcset="image/small.jpg 320w, image/medium.jpg 640w, image/large.jpg 1280w"

srcset="image/small.jpg 1x, image/medium.jpg 2x"

上記のように、srcset属性には2つの指定方法があります。1つ目はビューポート（ブラウザの表示領域）の幅に応じて画像を切り替える指定、2つ目はデバイスのピクセル比に応じて画像を切り替える指定です。

• 1つ目の指定方法の場合に限り、sizes属性の指定が有効になります。

指定方法の詳細は以下のようになります。

ビューポートの幅に応じて画像を切り替える指定

srcset="image/small.jpg 320w, image/medium.jpg 640w, image/large.jpg 1280w"

上記は、サイズの異なる3つの画像を指定しています。URLの横にある数値はその画像ファイルの横幅（ピクセル数）を表していて、数値の後には幅であることを示すwが付けられています。この数値と w を合わせたものを幅記述子といいます。（URLと幅記述子は半角スペースで区切ります）

上記のように指定しておくと、例えばPCでは large.jpg 、タブレットでは medium.jpg、スマホでは small.jpg が使用されるようになります。（実際にはsizes属性とのからみがあるので細かい計算が必要です）

デバイスのピクセル比に応じて画像を切り替える指定

srcset="image/small.jpg 1x, image/medium.jpg 2x"

上記は、サイズの異なる2つの画像を指定しています。URLの横にある数値はデバイスピクセル比（詳しくは検索してください）を表していて、数値の後には比率であることを示すxが付けられています。この数値と x を合わせたものを画素密度記述子（ピクセル密度記述子）といいます。（URLと画素密度記述子は半角スペースで区切ります）

上記のように指定しておくと、一般的なディスプレイでは small.jpg、高画素密度のディスプレイでは medium.jpg が使用されるようになります。数値には小数点以下を指定することも可能です（1.5x、2.5x など）。

記述子を省略した画像は 1x を指定したことになるため、上記例は次のように記述することもできます。

srcset="image/small.jpg, image/medium.jpg 2x"

• より高性能なディスプレイに対応する場合は、x3 や x4 向けの画像も必要かもしれません。

srcset属性を指定する際にはいくつかの注意事項があります。

• 幅の指定と比率の指定を混在させてはならない。
• 幅の指定を行う場合は全ての画像候補に幅記述子の指定が必要。
• 同一の幅を複数の画像候補に指定してはならない。
• 同一の比率を複数の画像候補に指定してはならない。

sizes属性の指定方法

sizes属性の値には、画像の表示サイズ（横幅）を指定することができます。画像の表示サイズは px 等の単位、またはビューポートの幅に対する割合（vw）で指定します。

• 割合の指定は、親要素の幅に対するものではなく、ビューポートの幅に対するものなので注意してください。

sizes="50vw"

上記は、ビューポートの幅に対して50%の幅を指定しています。ビューポートの幅が1000pxであれば、画像の表示幅は500pxになります。割合を示す数値の後には vw を加えておきます。

また、必要に応じてメディアクエリを指定することもできます。（ブレイクポイントを設定します）

sizes="(max-width: 420px) 100vw, (max-width: 800px) 70vw, 50vw"

上記は、ビューポートの幅が420pxまでは100%の幅で、800pxまでは70%の幅で、それ以上の場合は50%の幅で画像を表示する、という指定になります。複数のブレイクポイントを設定する場合は、上記のようにカンマ（ , ）で区切って記述します。

• 最後の項目（上記例では 50vw）にはメディアクエリを指定しないようにします。

sizes="(max-width: 1280px) 100vw, 1280px"

上記は、ビューポートの幅が1280pxまでは100%の幅で、それ以上の場合は1280pxの幅で画像を表示する、という指定になります。（幅の上限を指定して、それ以上広がらないようにしています）

• sizes属性を指定する場合は、srcset属性の値に画像ファイルの幅を指定しておく必要があります。

srcset属性とsizes属性の関係

srcset属性とsizes属性は密接に関係しています。

単純な例として、次のケースを想定してみます。

srcset="small.jpg 320w, medium.jpg 640w, large.jpg 1280w" 
sizes="100vw"

上記の場合、画像は常にビューポートの幅に対して100%で表示されます。

そのため、ビューポートの幅が320pxまでは small.jpg、321～640pxまでは medium.jpg、641px以上は large.jpg が使用されると考えられます。

しかし、上記を次のケースに当てはめると少しややこしくなってきます。

srcset="small.jpg 320w, medium.jpg 640w, large.jpg 1280w" 
sizes="50vw"

今度はビューポートの幅に対して50%の幅で画像が表示されます。

ビューポートの幅が600pxの場合、画像の表示サイズは結果的に300pxになるので、使用される画像は medium.jpg ではなく small.jpg になるでしょう。

• 実際にどの画像が使用されるかは、ブラウザ側に任されています。

calc() 関数による指定

sizes属性の値には、CSSのcalc()関数を使用することもできます。この関数を使用することで、計算式によって値を指定できるようになります。

例えば、サイドバーの幅（300px）を除いた残りすべてを指定する場合は、calc()関数を使って次のように記述します。

• 100% ではなく 100vw と記述するところに注意してください。また、演算子の前後には半角のスペースが必要です。

sizes="calc(100vw - 300px)"

メディアクエリと組み合わせると次のようになります。

sizes="(min-width: 600px) calc(100vw - 300px), 100vw"

上記は、ビューポートの幅が600px以上の場合はサイドバーの幅を除いた残りすべて、それ以外の場合は100%の幅で画像を表示する、という指定です。

ブラウザによる挙動の違い

ブラウザにより、画像が切り替わる際の挙動が以下のように異なります。

Firefox

ブラウザの幅を動かすと、ブレイクポイントごとに画像が切り替わります。（常に切り替わります）

Chrome、Edge

より大きい画像を既に読み込んでいる場合は、ブラウザの幅を狭くしてもブレイクポイントで画像が切り替わりません（大きい画像を使用し続けます）。逆に、小さい画像を読み込んだあとにブラウザの幅を広げていくと、ブレイクポイントで大きい画像に切り替わります。