srcset”属性｜“img要素:画像｜HTML－havin' a coffee break

＃

“srcset”属性について

“srcset”属性は使用可能な画像ファイルのセットを示すための属性です。レスポンシブな画像を埋め込むのに使用します。

“srcset”属性の値はカンマ(“,”)で区切った1個以上の画像ファイルのURLのリストです。画像ファイルのURLの後に空白文字を挟んで記述子でどのような時に表示する画像なのかを示します。

“srcset”属性で指定した条件でその画像を表示するかどうかはブラウザに任されており、想定した通りの画像が表示されない場合があります。画像ファイルによって画像の内容が異なる場合など指定した条件通りに画像をしたい場合は“picture”要素を使用します。

“srcset”属性に対応していないブラウザでは“src”属性で指定された画像ファイルを読み込むので、“srcset”属性を指定する場合でも“src”属性は省略してはいけません。

＃

記述子

記述子は“srcset”属性で示した画像ファイルを表示する条件を指定します。記述子には幅記述子もしくは画素密度記述子の2種類があります。

記述子がない場合は“1x”として扱われます。同じ“srcset”属性の値に幅記述子と画素密度記述子を混在させたり、記述子を重複させることはできず、無効になります。

幅記述子

幅記述子(“w”)はビューポートの横幅ごとに表示したい画像ファイルを示すのに使用します。

幅記述子の数値はURLで示した画像ファイルが持つ実際の横幅のピクセル数です。この数値は正の整数です。

横幅が320px、640px、1280pxの3種類の画像ファイルを指定する場合は以下のように“srcset”属性を指定します。



srcset="sample-320.png 320w, sample-640.png 640w, sample-1280.png 1280w"

“srcset”属性の値に幅記述子を使用した場合は“sizes”属性を指定しなければなりません。

幅記述子を使用して埋め込まれた画像は“sizes”属性やCSSによって大きさが指定されていなければビューポートの横幅と同じ横幅で表示されます。上の例では画像が横幅320px以下で表示される(=ビューポートの横幅が320px以下)時は“sample-320.png”、320px以上で640px以下で表示される時は“sample-640.png”、640px以上の時は“sample-1280.png”を表示するように指定します。

ただし、これはデバイスピクセル比が1の場合で、幅記述子を使用した場合はブラウザがデバイスピクセル比も合わせて計算するので、デバイスピクセル比が異なるデバイスでは指定した通りにならない場合もあります。

画素密度記述子

画素密度記述子(“x”)はデバイスピクセル比ごとに表示したい画像ファイルを示すのに使用します。

画素密度記述子の数値はURLで示した画像ファイルを表示する時のデバイスピクセル比です。この数値は正の数で小数を指定することもできます。

デバイスピクセル比が2のディスプレイに最大限にきれいに画像を表示するには表示したい解像度(ピクセル数)の2倍の解像度の画像が必要になります。デバイスピクセル比が3や4の場合も同様です。

解像度が1倍、2倍、3倍の3種類の画像ファイルを指定する場合は以下のように“srcset”属性を指定します。



srcset="sample-320.png 1x, sample-640.png 2x, sample-1280.png 3x"

“srcset”属性に画素密度記述子を使用して埋め込まれた画像は画素密度記述子が“1x”つまりデバイスピクセル比が1のディスプレイで表示することを想定した画像は等倍で表示されますが、“2x”つまりデバイスピクセル比が2のディスプレイで表示することを想定した画像は2分の1の大きさで表示されます。これは“3x”や“4x”の場合も同様です。

上の例ではデバイスピクセルが1のデバイスでは“sample-320.png”、デバイスピクセルが2のデバイスでは“sample-640.png”、デバイスピクセルが3のデバイスでは“sample-1280.png”を表示すること指定します。

＃

指定できる値

属性値	説明
URL 画像の横幅w,URL 画像の横幅w,...	ビューポートの横幅ごとの表示する画像のURL
URL デバイスピクセル比x,URL デバイスピクセル比x,...	デバイスピクセル比ごとの表示する画像のURL