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
79.24K
hector
60.45K
Did you know?
JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.
Security insights from Cside
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#