Retina.js

RetinaJS allows you to serve up a smaller, low-fi image by default to your users before swapping in a larger retina image for users that will enjoy the sharper crisper graphics.

The obvious issue with this approach is that you will get a double download for anyone using a up-market smart phone (galaxy, iphone 4s<) and usually it’s the mobile devices you want to limit the number of http requests.

Still this is a great solution if you’ve got rasterized images, however for icons we would suggest looking at using SVG’s to accomplish and much neater solution.

How it works

When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.

The script assumes you use Apple’s prescribed high-resolution modifier (@2x) to denote high-resolution image variants on your server.

For example, if you have an image on your page that looks like this:

<img src="/images/my_image.png" />

The script will check your server to see if an alternative image exists at this path:

"/images/[email protected]"