Retina.js – To Make Your Websites Retina Graphics Ready!

Retina and high-resolution displays in general are like HD TV, and sooner than later everyone will have one. Why you should consider to get Retina ready your websites. Because your website will look really bad on a high-res display. How bad? Zoom about 200% on your website or one of your images, that’s exactly what it looks like on a Retina display. In this article, I’m going to show you how to make your websites Retina Graphics Ready.

Retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays.

When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.

 How Retina.js Works?

The JavaScript helper script automatically replaces images on your page that high-resolution variants (if they exist). To use it, download the script and include it at the bottom of your page.

1. Upload the retina.js file on your server
2. Just load the script on your webpage, by add the following code inside of body section of your blog

<script type="text/javascript" src="/scripts/retina.js"></script>

3. That’s it!