Srcset attribute may load larger images on mobile than desktop

UX
11

I may be wrong, but I think it makes sense.
If you look at the HTML srcset, the following images are served based on the device pixel ratio (x1, x1,5, x2).

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

Usually, mobile has an x2 ratio (or more) because they have a higher pixel density.
So you would want to serve images with higher resolution.

Device Pixel Ratio

Device Pixel Ratio(DPR) is a number given by device manufacturers and it’s used for HiDPI(High Dots Per Inch) or Retina(Apple’s trademark) displays, which are part of modern smartphones, tablets and even some laptops and monitors.
DPR is in direct correlation with pixel density of the display, the higher the density the greater the DPR value.

DPR is the ratio between physical(device) pixels and logical(CSS) pixels in either horizontal(width) or vertical(height) direction of a screen.
In other words, DPR is a number used for calculating CSS resolution of the screen. From DPR we can directly see how many actual physical hardware pixels make up one CSS pixel.

Example:
Apple iPhone 12
Resolution in device(physical) pixels: 1170 x 2532
DPR: 3
Width: 1170/3 = 390, Height: 2532/3 = 844
Therefore, resolution in CSS pixels: 390 x 844

Since DPR is 3, in pixel grid: 3(width) x 3(height) = 9; 9 physical pixels are used to form one CSS pixel.

5 Likes