imageresponsive-designresponsive-imagessrcset

Should I provide hi-res website images to mobile devices? What about minimizing download size?

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

Solution

  • 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: