Retina-ready Web Graphics

I recently had to update several sites to be retina-ready. I asked a number of colleagues about doing this and scoured the internet. Finally, I happened upon arguably the best and easiest option: retinajs.

http://retinajs.com/

It is super simple to use.

1. Create two versions of your graphic, one at normal resolution and another at double the size (eg. 200x300 and 400x600).
2. Name the first image (eg. test.png)
3. Name the second image (eg. test@2x.png)
4. Upload them to the same location
5. Upload retina.js and add it to your page

After that, if the device-pixel-ratio is 2, the second image will be selected automatically. DONE.