Retina-ready Responsive Image Plugin For jQuery - responsImg

responsImg is a lightweight, flexible jQuery responsive image plugin for serving the best image resolutions on desktop and mobile devices. Compatible with @2x varient on retina-ready devices. Works both with <img> tag and background images.

Basic usage:

1. To use this plugin, just insert the main JavaScript file 'jquery.responsImg.min.js' after jQuery library and we're ready to go.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.responsImg.min.js"></script>

2. Create a normal <img> tag and specify the image sources for different screen resolutions.

<img src="normal.jpg" class="responsimg"
     data-responsimg320="small.jpg"
     data-responsimg480="medium.jpg"
     data-responsimg768="large.jpg"
/>

3. Enable retina display graphics (@2x) to the plugin like so:

<img src="normal.jpg" class="responsimg"
     data-responsimg320="small.jpg, [email protected]"
     data-responsimg480="medium.jpg"
     data-responsimg768="large.jpg"
/>

4. Call the function and you will see the image auto changes after resizing browser window.

$('.responsimg').responsImg();

5. Possible plugin options to config the responsive image delivery.

$('.responsimg').responsImg({

  // false = NOT load the small image when the large version is loaded
  allowDownsize: false,

  // false = the sizes specified in the data attributes are related to the size of the viewport. 
  // If elementQuery is set to true, the sizes specified in the attributes will be related to the size of the image itself.
  elementQuery: false,

  // delay between the window resize action and the image change
  delay: 200,

  // custom breakpoints
  // e.g.
  // breakpoints: {
  //   foo: 480,
  //   bar: 768,
  //  baz: 960
  //}
  breakpoints: null,

  // Set to true if you want images loaded in the smallest size necessary to fit the number of pixels needed when the browser is zoomed out. 
  // Perfect for websites that want to keep mobile loading to a minimum and that don't have the meta viewport tag set to device-width.
  considerDevice: false
  
});

---

This awesome jQuery plugin is developed by etiennetalbot. For more Advanced Usages, please check the demo page or visit the official website.