With the newer phones offering up to x3 density rendering, I am tempted to serve up x3 hi-res images to them using the HTML element srcset. However, I am concerned about the added mobile data requirements from doing so.

Do you tend to reserve hi-res images to larger devices (e.g., laptops and desktops) that usually do not use mobile data? Or perhaps, compromise and provide up to x2 images, rather than x3?

I am trying to find the balance between providing mobile web pages that are as light as possible in size, minimizing data usage and maximizing speed, and providing nice, crisp images.

Thanks, Sam

CodePudding user response：

Actually, it's more up to x4 density now: https://www.mydevice.io/#compare-devices

There is unfortunately to simple way to prevent loading of huge images on small devices with really high density.

We should even be able to limit density to ~2.5dppx based on this study:

• DPR 2 is good enough for most people
• DPR 3 only benefits a very lucky few

There are discussions about this in issues on the HTML standard:

• Responsive images causes performance issues on high-resolution devices
• Possibility to mark image candidate as high compressed