Minimalist Responsive Image jQuery Plugin - responsive-image.js

Just another jQuery based responsive image solution that loads the appropriate images for your cross-platform website to reduce network traffic and increase page load speed.

How to use it:

1. Add the jQuery responsive-image.js' script to the page, after you've added jQuery.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.responsive-image.js"></script>

2. Insert an image into your web page and specify the image sources for different screen resolutions using HTML5 data attributes.

<img src="mobile.png"
     data-mobile="mobile.png"
     data-phablet="phablet.png"
     data-tablet="tablet.png"
     data-desktop="desktop.png"
>

3. Call the plugin on document ready and done.

$("body").responsiveImage();

4. Change the default breakpoints.

$("body").responsiveImage({

  // in pixels
  mobile : 400,
  phablet: 550,
  tablet : 750,
  desktop: 1000,
  
});

---

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