Recently, I was doing speed test on a new website for a client, and I was puzzled by Chrome's report saying that my images were too big.
I looked at the details and it seems like the browser is using a way bigger image than what I think it should use. All my images use srcset with w descriptor to provide different sizes of images for different device resolution, and on iphone it shows an image of 2600px being used. dang. How can it be so big when the phone screen is relatively small? I spent hours thinking it was a bug and tried various ways to fix it.
It turned out that new devices have this thing called DPR (device pixel ratio), and apparently high end devices may have very high DPR such as 3 or even more. What it means is that now if the normal css pixel is 500, you need an image of 1500px for the given device.
This can have huge impact on the site performance because the device needs to download 3 times more data (more or less). For third world countries like mine where 4g feels sluggish, this can really delay the rendering of the site. For the clients they have to wait longer, and also unknowingly pay for more bandwidth.
Do we really need those big images? Only sometimes. And should not come at the cost of potential users abandon the site due to slow load.
For people using lazysizes, you can use the optimumux plugin to set the optimal DPR. The default is 1.6 mx which is reasonable IMHO.
For above the fold content which should not be loaded lazily IMHO, I'm looking into the setting of srcset with the x descriptor and sizes. I will update this post once I have a solid answer.
Top comments (2)
This is an interesting topic. I'm in a 3rd world country too. On web project (I'm a designer btw, but also do some frontend stuff) I mostly go with SVG, only use image when I can't use SVG, like product image etc. The internet speed is garbage here and expensive, our current project, I advised my dev team to resize the image to 1024px max, scale down to 720px or 480px depend on where to use it.
I really never think about the DPR thing on the iPhone and now it's time to take notes.
I found a long thread discussing this issue here:
github.com/whatwg/html/issues/4421