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.
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. test@2x.png)
- 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.
Written by Zak Dziczkowski
Related protips
2 Responses

Nice. There's also a Stylus mixin that makes this completely painless and doesn't require an additional script.
http://visionmedia.github.com/nib/ (Ctrl + F "Responsive")
over 1 year ago
·
Very cool, corysimmons! Thanks for sharing.
over 1 year ago
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Web
Authors

johnbender
77.91K

hector
57.04K
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#