Jan. 8th,2019
“srcset”属性について
“srcset”属性は使用可能な画像ファイルのセットを示すための属性です。“picture”要素でレスポンシブな画像を埋め込むのに使用します。
“srcset”属性の値はカンマ(“,”)で区切った1個以上の画像ファイルのURLのリストです。画像ファイルのURLの後に半角スペースカンマ(“ ”)を挟んで記述子を記述することでどのような時に表示する画像なのかを示します。
“srcset”属性は親要素が“picture”要素である場合に指定できます。また、この時必須属性です。
“srcset”属性は親要素が“audio”要素もしくは“video”要素の時は無視されます。
記述子
記述子は“srcset”属性で示した画像ファイルを表示する条件を指定します。記述子には幅記述子もしくは画素密度記述子の2種類があります。
記述子がない場合は“1x”として扱われます。同じ“srcset”属性の値に幅記述子と画素密度記述子を混在させたり、記述子を重複させることはできず、無効になります。
“srcset”属性で複数のリソースを指定している場合、指定した条件でその画像を選択するかどうかはブラウザに任されており、想定した通りの画像が表示されない場合があります。なので内容が異なる画像を複数指定するのには適していません。指定した条件通りに画像をしたい場合は“media”属性を指定してそれぞれ別の“source”要素に指定します。
幅記述子
幅記述子(“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”を表示すること指定します。
サンプルコード
メディアに応じて画像を出し分ける
<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>
メディアごとに複数のリソースを指定(幅記述子)
<p>
<picture>
<source media="(max-width: 320px)" srcset="photo-sp-320.jpg 320w, photo-sp-640.jpg 640w, photo-sp-1280.jpg 1280w" sizes="90vw">
<source media="(max-width: 640px)" srcset="photo-tb-320.jpg 320w, photo-tb-640.jpg 640w, photo-tb-1280.jpg 1280w" sizes="70vw">
<source media="(min-width: 640px)" srcset="photo-pc-320.jpg 320w, photo-pc-640.jpg 640w, photo-pc-1280.jpg 1280w" sizes="50vw">
<img src="photo-pc-640.jpg" alt="サンプルの写真">
</picture>
</p>
メディアごとに複数のリソースを指定(画素密度記述子)
<p>
<picture>
<source media="(max-width: 320px)" srcset="photo-sp-1.jpg 1x, photo-sp-2.jpg 2x">
<source media="(max-width: 640px)" srcset="photo-tb-1.jpg 1x, photo-tb-2.jpg 2x">
<source media="(min-width: 640px)" srcset="photo-pc-1.jpg 1x, photo-pc-2.jpg 2x">
<img src="photo-pc-640.jpg" alt="サンプルの写真">
</picture>
</p>
