jQuery Plugin To Load Correct Image Based On Viewport Size - Responsive Images

Just another jQuery dependent, cross-platform responsive image solution which dynamically changes the image sources depending on the current viewport size. Great for mobile webpage or web application to reduce the page size and improve the load speed. Heavily based on CSS3 media queries.

How to use it:

1. To use this plugin, you first have to load the responsiveimages.js plugin after loading jQuery library like this:

<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="src/responsiveimages.js"></script>

2. Create an img tag and specify the predefined sizes and the matching images with different sizes using data attributes:

<img data-sizes="xl, l, m, s, xs" 
     data-srcset="
       xl.jpg,
       l.jpg,
       m.jpg,
       s.jpg,
       xs.jpg
     "
>

3. That's it. The plugin will automatically load the proper image based on the current browser size. You're able to change the default predefined sizes in the JavaScript:

defaultSizes =  {
  xs:"only screen and (max-width : 480px)",
  s:"only screen and (min-width : 481px)",
  m:"only screen and (min-width : 768px)",
  l:"only screen and (min-width : 1280px)",
  xl:"only screen and (min-width : 1921px)"
};

---

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