Sick of seeing blurry icons and images when viewing your website on retina displays? Check out our latest tutorial and learn how to serve high definition images to those puppies.
Demo Page:
To see the script in action, view the demo page on a retina device or display.
We’ll Need a Few Plugins…
Retina.js
A plugin by Imulus that checks each image on the page to see if there is a high-resolution version on your server. If a high-resolution version is present, the script will swap in that image. I have used many different solutions for serving high resolution images, but this script is by far the easiest to implement and does not require any additional libraries, plugins, or server configurations. Of course, you may find that Retina.js is not the best solution for your project – rest assured there are many other fine techniques and scripts available, for example Retina Images.
Getting Started
Download Retina.js and add the line below just before the closing </body> tag. As far as plugin setup goes, you are finished. Pat yourself on the back and grab another cronut.
<script src="retina.min.js" type="text/javascript"></script>
- Tip: Be sure to update the source to reflect the location of the “retina.min.js” file on your server.
For HTML Images…
For standard HTML images using the <img> tag, setup is easy. Simply save two versions of each image you want a high definition version of – one at the display resolution, and another twice the size – then add “@2x” to the end of the larger image, just before the file extension. For example, if you have a PNG image that will be displayed at 100×100 pixels, your additional retina version should be saved at 200×200 pixels. Then, place the 100×100 pixel image (ex. image.png) and 200×200 pixel image with “@2x” added to the file name (ex. image@2x.png) in the same location so Retina.js can locate the HD version and serve it to retina devices.
For CSS Background Images…
CSS background images are a bit trickier. You could use the LESS mix-in provided on the Retina.js GitHub page, but you will need to have a server side or JavaScript based LESS compiler setup already. Another option is to target retina devices using a CSS media query and serve the higher resolution image to the device. To do this, simply add the media query below to the end of your stylesheet, populate it with the classes or ids you want to retinize, and then change the url to that of the “@2x” image.
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
.retina-image {
background-image: url('../images/your-retina-image@2x.png');
background-size: 300px 200px;
}
}
- Tip: Be sure to define the “background-size” or else the image will not display properly.