Serving high res images to retina display

Question

how to detect, in a cross-browser compatible way, the pixel density of the device visiting a webpage so that one can either serve standard or highres images

Answer 1

You need to be aware of network capabilities, responsive images and resource loading.

So far the javascript solutions are not quiet there as they generally require both resources (images) to be downloaded before the image swap.

Your best bet is background css media queries unless you go with a full solution like this: http://adaptive-images.com explained here: https://vimeo.com/38947881