srcset にピクセル密度記述子を設定した場合の動作を確認します。
概要
こちらの記事では、srcsetを利用してピクセル密度記述子を利用して解像度が高いディスプレイでの画像表示に対応しました。
通常の画像表示では問題ありませんが、画像のサイズによって微妙に動作が違う場合があります。
この記事では、srcsetでピクセル密度記述子を使用した場合に、記述方法や画像サイズによってどのような違いが出るか動作を確認します。
画像の用意
次の4つの画像を準備します。
幅:400px 高さ:80px
幅:800px 高さ:240px
幅:1800px 高さ:400px
幅:3600px 高さ:800px
動作確認1:何も指定しない場合
img タグにsrc属性のみを記述し、srcsetを記述しない場合の動作です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h2>srcset なしの表示</h2>
<img src="image\image-w400.png" /><br />
<img src="image\image-w800.png" /><br />
<img src="image\image-w1800.png" /><br />
<img src="image\image-w3600.png" /><br />
</body>
</html>
表示結果
通常解像度のディスプレイ
特に問題なく表示できています。
縮小した場合の表示です。
解像度が2倍のディスプレイ (4Kディスプレイ フォントサイズ200%)
画像が引き延ばされて表示されています。オレンジの
image-w400.png の表示サイズの横幅は800ピクセルあります。
Webブラウザの表示倍率を変更して縮小して表示した画面です。
表示に特に問題はありません。高解像度のディスプレイでは実際の画像の2倍の大きさで表示されています。
動作確認2:srcsetを記述した場合の動作
imgタグにsrcset属性を記述して表示を確認します。
1x，2x，4x, 8x を指定した場合と
1x, 2x, 3x, 4x を指定した場合とで動作の違いが出るかを確認します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h2>srcset ありの表示</h2>
<img src="image\image-w400.png" srcset="image\image-w400.png 1x, image\image-w800.png 2x, image\image-w1800.png 4x, image\image-w3600.png 8x" /><br />
<img src="image\image-w400.png" srcset="image\image-w400.png 1x, image\image-w800.png 2x, image\image-w1800.png 3x, image\image-w3600.png 4x" /><br />
<hr />
<img src="image\image-w800.png" srcset="image\image-w800.png 1x, image\image-w1800.png 2x, image\image-w3600.png 4x" /><br />
<img src="image\image-w800.png" srcset="image\image-w800.png 1x, image\image-w1800.png 2x, image\image-w3600.png 3x" /><br />
<hr />
<img src="image\image-w1800.png" srcset="image\image-w1800.png 1x, image\image-w3600.png 2x" /><br />
<hr />
<img src="image\image-w3600.png" srcset="image\image-w3600.png 1x" /><br />
</body>
</html>
表示結果
通常解像度のディスプレイ
すべての画像が一番サイズの大きい
image-w3600.png の画像が利用されていることがわかります。
Webブラウザの表示倍率を変更して縮小した場合の表示です。
画像は一番大きい画像が使われますが、画像の幅は記述したピクセル密度記述子に合わせてリサイズされています。
一番上の画像は
image\image-w3600.png 8x が採用されているため、8分の1のサイズの横幅450ピクセルで表示されており、2番目の画像は
image\image-w3600.png 4x が採用されているため、
4分の1のサイズでの横幅900ピクセルで表示されています。
srcsetが設定されている場合には一番解像度が高い設定が採用される動作になっているようです。
解像度が2倍のディスプレイ (4Kディスプレイ フォントサイズ200%)
高解像度設定でも、すべての画像が一番サイズの大きい
image-w3600.png の画像が利用されていることがわかります。
Webブラウザの表示倍率を変更した場合の表示です。
一番上の画像は
image\image-w3600.png 8x が採用されているため、8分の1のサイズの横幅450ピクセルでの表示になりますが、高解像度ディスプレイのため2倍のサイズの横幅900ピクセルで表示されています。また、2番目の画像は
image\image-w3600.png 4x が採用されているため、4分の1のサイズでの横幅900ピクセルの2倍の表示の1800ピクセルで表示されています。
高解像度ディスプレイでも、srcsetが設定されている場合には一番解像度が高い設定が採用され、横幅はピクセル密度記述子に合わせて表示する動作になっているようです。
動作確認3:srcsetを記述して小さい画像を高解像度画像に設定した場合の動作
imgタグにsrcset属性を記述しますが、大きい解像度の画像に小さい画像を指定した場合にどのような表示になるかを確認します。
<h2>srcset ありの表示 (逆転)</h2>
<img src="image\image-w400.png" srcset="image\image-w400.png 8x, image\image-w800.png 4x, image\image-w1800.png 2x, image\image-w3600.png 1x" /><br />
<img src="image\image-w400.png" srcset="image\image-w400.png 4x, image\image-w800.png 3x, image\image-w1800.png 2x, image\image-w3600.png 1x" /><br />
<hr />
<img src="image\image-w800.png" srcset="image\image-w800.png 4x, image\image-w1800.png 2x, image\image-w3600.png 1x" /><br />
<img src="image\image-w800.png" srcset="image\image-w800.png 3x, image\image-w1800.png 2x, image\image-w3600.png 1x" /><br />
<hr />
<img src="image\image-w1800.png" srcset="image\image-w1800.png 2x, image\image-w3600.png 1x" /><br />
<hr />
<img src="image\image-w3600.png" srcset="image\image-w3600.png 1x" /><br />
通常解像度のディスプレイ
こちらの設定の場合、マシンによって動作が違います。
表示パターン1
下図の表示結果となります。一番大きい解像度設定が利用されるため、最初の画像は
image\image-w3600.png 1x が採用されます。1xの設定が反映されるため元の画像サイズで画像が表示されます。
Webブラウザの表示倍率を変更して画面を縮小した場合の表示です。
表示パターン2
下図の表示結果となります。一番大きい解像度設定が利用されるため、最初の画像は
image\image-w400.png 8x が採用されます。8xの設定が反映され8分の1のサイズにリサイズされるため、
横幅50ピクセルで画像が表示されます。
2番目の画像は
image\image-w400.png 4xが採用され、4分の1のサイズにリサイズされ、横幅100ピクセルでの表示になります。
Webブラウザの表示倍率を変更して画面を縮小した場合の表示です。
解像度が2倍のディスプレイ (4Kディスプレイ フォントサイズ200%)
こちらの設定の場合、マシンによって動作が違います。
表示パターン1
通常の解像度のディスプレイと同じ表示になります。
一番大きい解像度設定が利用されるため、最初の画像は
image\image-w400.png 8x が採用されます。8xの設定が反映され8分の1のサイズにリサイズされますが、
高解像度ディスプレイのため、2倍されて、横幅100ピクセルで画像が表示されます。
表示パターン2
下図の表示となります。
一番大きい解像度の設定ではなく、
image\image-w1800.png 2x が採用されます。
2xの設定が反映されるため、2分の1のサイズにリサイズされ、高解像度ディスプレイの設定が反映されるため、元の大きさと同じ横幅1800ピクセルで画像が表示されます。
微妙な挙動の違いは、ブラウザの違いによる動作違いが影響している可能性が高そうです。
動作確認4:widthを指定し、srcsetには何も指定しない場合
続いて、imgタグのwidth属性を指定して横幅を固定した場合の表示を確認します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h2>srcset なしwidth指定(width=600)の表示</h2>
<img src="image\image-w400.png" width="600"/><br />
<img src="image\image-w800.png" width="600" /><br />
<img src="image\image-w1800.png" width="600" /><br />
<img src="image\image-w3600.png" width="600" /><br />
</body>
</html>
通常解像度のディスプレイ
下図の表示になります。width=600 が指定されているため、image-w400.png の画像は引き延ばされて表示されます。
解像度が2倍のディスプレイ (4Kディスプレイ フォントサイズ200%)
高解像度のディスプレイでの表示は下図となります。解像度が2倍の設定のため、表示画像の横幅は1200ピクセルになります。
image-w400.png, image-w800.png の画像は引き延ばされた表示になります。
動作確認5:widthを指定し、srcsetを記述した場合の動作
imgタグのwidth属性を指定して横幅を固定し、srcset属性を設定した場合の表示を確認します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h2>srcset あり width指定(width=600)の表示</h2>
<img src="image\image-w400.png" srcset="image\image-w400.png 1x, image\image-w800.png 2x, image\image-w1800.png 4x, image\image-w3600.png 8x" width="600"/><br />
<img src="image\image-w400.png" srcset="image\image-w400.png 1x, image\image-w800.png 2x, image\image-w1800.png 3x, image\image-w3600.png 4x" width="600" /><br />
<hr />
<img src="image\image-w800.png" srcset="image\image-w800.png 1x, image\image-w1800.png 2x, image\image-w3600.png 4x" width="600" /><br />
<img src="image\image-w800.png" srcset="image\image-w800.png 1x, image\image-w1800.png 2x, image\image-w3600.png 3x" width="600"/><br />
<hr />
<img src="image\image-w1800.png" srcset="image\image-w1800.png 1x, image\image-w3600.png 2x" width="600" /><br />
<hr />
<img src="image\image-w3600.png" srcset="image\image-w3600.png 1x" width="600"/><br />
</body>
</html>
通常解像度のディスプレイ
下図の表示となります。一番解像度の大きい設定が利用される動作になります。
解像度が2倍のディスプレイ (4Kディスプレイ フォントサイズ200%)
下図の表示となります。解像度が2倍の設定のため、表示画像の横幅は1200ピクセルになります。
こちらも、解像度の一番高い設定が利用されます。
動作確認6:widthを指定し、srcsetを記述して小さい画像を高解像度画像に設定した場合の動作
widthを指定し、imgタグにsrcset属性を記述しますが、大きい解像度の画像に小さい画像を指定した場合にどのような表示になるかを確認します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h2>srcset あり width指定(width=600)の表示 (逆転)</h2>
<img src="image\image-w400.png" srcset="image\image-w400.png 8x, image\image-w800.png 4x, image\image-w1800.png 2x, image\image-w3600.png 1x" width="600" /><br />
<img src="image\image-w400.png" srcset="image\image-w400.png 4x, image\image-w800.png 3x, image\image-w1800.png 2x, image\image-w3600.png 1x" width="600" /><br />
<hr />
<img src="image\image-w800.png" srcset="image\image-w800.png 4x, image\image-w1800.png 2x, image\image-w3600.png 1x" width="600" /><br />
<img src="image\image-w800.png" srcset="image\image-w800.png 3x, image\image-w1800.png 2x, image\image-w3600.png 1x" width="600" /><br />
<hr />
<img src="image\image-w1800.png" srcset="image\image-w1800.png 2x, image\image-w3600.png 1x" width="600" /><br />
<hr />
<img src="image\image-w3600.png" srcset="image\image-w3600.png 1x" width="600" /><br />
</body>
</html>
通常解像度のディスプレイ
解像度の最も高い設定ではなく、1xの記述が採用されます。この動作からsrcset内の各画像の大きさを判定して、表示される画像が選択されているようです。
解像度が2倍のディスプレイ (4Kディスプレイ フォントサイズ200%)
高解像度のディスプレイの場合、2xの記述が採用されます。
動作確認7:styleで横幅を指定し、srcsetには何も指定しない場合
先ほどの例では、width属性で画像の横幅を設定しましたが、style属性で横幅を設定した場合の動作を確認します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h2>srcset なしstyle width指定(width:600px)の表示</h2>
<img src="image\image-w400.png" style="width:600px" /><br />
<img src="image\image-w800.png" style="width:600px" /><br />
<img src="image\image-w1800.png" style="width:600px" /><br />
<img src="image\image-w3600.png" style="width:600px" /><br />
</body>
</html>
通常解像度のディスプレイ
width属性を指定した場合と同様の結果になります。
style="width:600px" が指定されているため、image-w400.png の画像は引き延ばされて表示されます。
解像度が2倍のディスプレイ (4Kディスプレイ フォントサイズ200%)
高解像度のディスプレイでの表示は下図となります。解像度が2倍の設定のため、表示画像の横幅は1200ピクセルになります。
image-w400.png, image-w800.png の画像は引き延ばされた表示になります。
動作確認8:styleで横幅を指定し、srcsetを記述した場合の動作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h2>srcset あり style width指定(width:600px)の表示</h2>
<img src="image\image-w400.png" srcset="image\image-w400.png 1x, image\image-w800.png 2x, image\image-w1800.png 4x, image\image-w3600.png 8x" style="width:600px"/><br />
<img src="image\image-w400.png" srcset="image\image-w400.png 1x, image\image-w800.png 2x, image\image-w1800.png 3x, image\image-w3600.png 4x" style="width:600px" /><br />
<hr />
<img src="image\image-w800.png" srcset="image\image-w800.png 1x, image\image-w1800.png 2x, image\image-w3600.png 4x" style="width:600px" /><br />
<img src="image\image-w800.png" srcset="image\image-w800.png 1x, image\image-w1800.png 2x, image\image-w3600.png 3x" style="width:600px" /><br />
<hr />
<img src="image\image-w1800.png" srcset="image\image-w1800.png 1x, image\image-w3600.png 2x" style="width:600px" /><br />
<hr />
<img src="image\image-w3600.png" srcset="image\image-w3600.png 1x" style="width:600px" /><br />
</body>
</html>
通常解像度のディスプレイ
下図の表示となります。一番解像度の大きい設定が利用される動作になります。
解像度が2倍のディスプレイ (4Kディスプレイ フォントサイズ200%)
下図の表示となります。解像度が2倍の設定のため、表示画像の横幅は1200ピクセルになります。
こちらも、解像度の一番高い設定が利用されます。
動作確認9:styleで横幅を指定し、srcsetを記述して小さい画像を高解像度画像に設定した場合の動作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h2>srcset あり style width指定(width:600px)の表示</h2>
<img src="image\image-w400.png" srcset="image\image-w400.png 8x, image\image-w800.png 4x, image\image-w1800.png 2x, image\image-w3600.png 1x" style="width:600px"/><br />
<img src="image\image-w400.png" srcset="image\image-w400.png 4x, image\image-w800.png 3x, image\image-w1800.png 2x, image\image-w3600.png 1x" style="width:600px" /><br />
<hr />
<img src="image\image-w800.png" srcset="image\image-w800.png 4x, image\image-w1800.png 2x, image\image-w3600.png 1x" style="width:600px" /><br />
<img src="image\image-w800.png" srcset="image\image-w800.png 4x, image\image-w1800.png 2x, image\image-w3600.png 1x" style="width:600px" /><br />
<hr />
<img src="image\image-w1800.png" srcset="image\image-w1800.png 2x, image\image-w3600.png 1x" style="width:600px" /><br />
<hr />
<img src="image\image-w3600.png" srcset="image\image-w3600.png 1x" style="width:600px" /><br />
</body>
</html>
通常解像度のディスプレイ
解像度の最も高い設定ではなく、1xの記述が採用されます。この動作からsrcset内の各画像の大きさを判定して、表示される画像が選択されているようです。
解像度が2倍のディスプレイ (4Kディスプレイ フォントサイズ200%)
高解像度のディスプレイの場合、2xの記述が採用されます。
どのような動作になっているか
記述の違いによる動作を確認しました。マシンによって動作が違ったりするため、結論としては、どういう基準で解像度に応じた画像が選択されるのか、よくわかりません。
とはいえ、ピクセル密度記述子利用して、小さい画像を大きい画像として設定すると誤動作の原因になる可能性が高そうです。
srcsetは多くの場合で、高い解像度の画像が優先的に使われるように見えますので、高解像度のディスプレイでない場合でも高解像度画像が参照されるケースがあるように見受けられます。
また、widthやスタイルでピクセル数を指定した場合、高解像度ディスプレイではディスプレイの実ピクセル数ではなく、倍率を考慮したピクセル数で表示されることがわかります。
(400pxと設定しても、拡大率200%のディスプレイでは800ピクセル幅で画像が表示されます。)
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2022-11-07
作成日: 2020-09-27
