Adding Retina Images to your Website, Made Easy
4
2
1
0
Introduction
If you’ve recently purchased an Apple device, or are just a fan of Apple products, you may be familiar with Retina displays. Retina displays feature a pixel density so high that Apple claims the human eye cannot distinguish between individual pixels. You can find Retina displays on current iPhone/iPod Touch, iPad, and MacBook Pro models, and the quality of the image is simply astounding.
Such a high resolution results in incredibly sharp (and beautiful) text on websites. Unfortunately, the text looks so sharp on Retina devices it often makes the accompanying images look a bit blurry by comparison. That is unless the site owner has taken measures to harness the amazing power of these displays. There are multiple ways to accomplish this, each with its own pros and cons (check out this great post for an in-depth look at the different options for Retina-compatible web design).
Some of the simpler methods require every device, whether Retina-capable or not, to load the larger, Retina-sized images. As Retina devices currently make up a very small percentage of the overall website viewer landscape, I don’t want to force non-Retina users to experience longer page load times only to receive no benefit from it. The method I prefer at present is Retina.js, a simple Javascript which loads Retina-sized images only on Retina devices.
After you add the script to your code, usage is easy: upload two versions of each image, one standard-sized and one double-sized and add “@2x” to the filename of the double-sized image. For example, if your standard image is named example.jpg, your Retina image would be called example@2x.jpg. Load the image in the usual way:
<img src="example.jpg" alt="Example" />
The standard image will load as usual, but if the site visitor is using a Retina device, the Retina.js script will automatically search for “example@2x.jpg,” and swap out the standard image for the higher resolution version. If example@2x.jpg doesn’t exist, the standard image will remain. The Retina.js ZIP file also includes a LESS mixin, for you advanced users. Enough talk, let’s put the awesome power of your Retina display to use!
Note: You will only be able to see a difference in the two images if you are viewing this post on a Retina device. If not, you’re just going to have to take my word for it :).
Non-Retina Image
Retina Image
Conclusion
While not yet universally adopted, high pixel density technology (such as Retina) provides the potential for a stunning visual experience on your website, and Retina.js makes it easy to implement. If you would like some help implementing Retina-quality images in your site, get in touch. We’d love to work with you to take the visual impact of your website to the next level.
Photo credit: Ian Sane