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.
It is super simple to use.
- Create two versions of your graphic, one at normal resolution and another at double the size (eg. 200x300 and 400x600).
- Name the first image (eg. test.png)
- Name the second image (eg. firstname.lastname@example.org)
- Upload them to the same location
- 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.