Determine image quality for mobile devices

Question

What is the best practice for determining which image assets to serve to mobile vs desktop on a responsive site? The desired outcome is to serve large, high-res images to desktop users and to serve smaller images to mobile users.

Answer 1

Last time I looked into this the way to go was this, I think this is still a nice way of solving the problem.

• Try to load a low-res image first. This will quickly provide the browser with adequate data.
• You can then use JavaScript (there are libraries for this) to detect features of the browser (do I have a high pixel ratio, do I have a large screen etc.)
• Then determine whether to load a larger version and what specific image (might be useful to put the various urls in data attributes of the image for this)

Of course you solution might be a little bit different but always keep progressive enhancement in mind (it makes no sense to load larger images first).