Retina.js - iPad 3/High Resolutions | UA - User Agents

Standards Based Development

On pageload 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".

How to use

The JavaScript helper script automatically replaces images on your page with high-resolution variants (if they exist). To use it, include the script before closing body element.


<script src="http://dev.bowdenweb.com/a/js/retina.js"></script>

Retina.js | Retina Graphics for Your Website