img要素のsrcset属性はdevicePixelRatioが1.5でも2xの画像を読み込む

img要素のsrcset属性はdevicePixelRatioが1.5でも2xの画像を読み込む

デバイスピクセル比が1.5でも2xを読み込む

以前srcsetに関する記事を投稿したことがあったが肝心なことが抜けていた。srcset=”bnr_1x.png 1x, bnr_2x.png 2x”のように指定してもデバイスピクセル比が1よりも大きい場合は2xのほうを表示してしまう。

極端な話1.01でも2xのほうが表示される

2xを指定すればRetinaディスプレイなどのデバイスピクセル比が2のときだけ2xの画像が表示されると勘違いされやすいので注意が必要だ。

imgのsrcset属性による画像解像度自動変更サンプル