jQuery Retina Display Plug-in

Downloads

• retina.js
• retina.min.js
• Fork it on Github

Requirements

• jQuery 1.6+
  
• minified version of the plugin
  
• <img> tags with either heights and widths as attributes, or <div>s that constrain them.

Usage

1. Load in the retina js file after your jQuery load, like this:
   

   		<script src="js/retina.js"></script>

2. Place images into your page with the height and width defined as attributes:

   		<img src="my_image.png" height="100" width="100" />

3. Place an asset that's double the size as the first one, named the same with an "@2x" postfix, in the same directory. So, in this case, we'd have a 200px x 200px image called my_image@2x.png.
   
   
4. In your jQuery load script, enable the plugin:
   

   		$(function () { 
   	
   			$(document).retina();
   	
   		});

5. Profit!