There are a few different ways to serve higher quality images to screens with retina displays. A new one I just found out about is the CSS image-set function.
At the time of this writing, it only works on Chrome and Safari.
The CSS looks a little something like this:
background-image: -webkit-image-set(url(./img/logo.png) 1x, url(./img/logo.png) 2x, url(./img/logo.png) 3x);
The function can take up to three parameters. According to the W3 spec:
This example shows how to use ‘
image-set()’ to provide an image in three versions: a “normal” version, a “high-res” version, and an extra-high resolution version for use in high-quality printing (as printers can have extremely high resolution):
So you get your regular image, a retina display one and lastly a high res one to send for printing!
Pretty cool stuff.