Srcset属性はデスクトップよりもモバイルで大きな画像を読み込む可能性があります

間違っているかもしれませんが、理にかなっていると思います。
HTMLのsrcsetを見ると、以下の画像はデバイスピクセル比(x1、x1.5、x2)に基づいて提供されます。

https://...2f50d4ad9f5f865b783b02d392de75bdceec01da_2_690x460.jpeg,
https://...2f50d4ad9f5f865b783b02d392de75bdceec01da_2_1035x690.jpeg 1.5x,
https://...2f50d4ad9f5f865b783b02d392de75bdceec01da_2_1380x920.jpeg 2x

通常、モバイルはピクセル密度が高いため、x2(またはそれ以上)の比率になります。
したがって、より高解像度の画像を提供したいはずです。

デバイスピクセル比

デバイスピクセル比(DPR)は、デバイスメーカーによって与えられる数値であり、現代のスマートフォン、タブレット、さらには一部のラップトップやモニターに搭載されているHiDPI(高ドット密度)またはRetina(Appleの商標)ディスプレイに使用されます。
DPRはディスプレイのピクセル密度と直接相関しており、密度が高いほどDPRの値は大きくなります。

DPRは、画面の水平(幅)または垂直(高さ)方向における物理(デバイス)ピクセルと論理(CSS)ピクセルの比率です。
言い換えれば、DPRは画面のCSS解像度を計算するために使用される数値です。DPRから、1つのCSSピクセルを形成するためにいくつの実際の物理ハードウェアピクセルが使用されているかを直接確認できます。

例:
Apple iPhone 12
デバイス(物理)ピクセルでの解像度:1170 x 2532
DPR:3
幅:1170/3 = 390、高さ:2532/3 = 844
したがって、CSSピクセルでの解像度:390 x 844

DPRが3であるため、ピクセルグリッドでは、3(幅)x 3(高さ)= 9。9つの物理ピクセルが1つのCSSピクセルを形成するために使用されます。

「いいね!」 5