Serve Up Retina Graphics To Your Website

Hot diggity. When we heard about this sweet little piece of javascript code called Retina, we got pretty excited. You see, retina.js is a piece of JavaScript code that 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. It’s that easy!

According to the retina.js website, here is how it works:

“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.

The script assumes you use Apple’s prescribed high-resolution modifier (@2x) to denote high-resolution image variants on your server.

For example, if you have an image on your page that looks like this:

 <img src="/images/my_image.png" />

The script will check your server to see if an alternative image exists at this path:

 "/images/my_image@2x.png"

The JavaScript helper script automatically replaces images on your page with high-resolution variants (if they exist). To use it, download the script, place on your server and include <script type=”text/javascript” src=”/scripts/retina.js”></script> at the bottom of your page before your closing </body> tag.”

Voila! That’s it. You can download it here.