Load The Proper Image On Window Resize - Responsive Image Resizer

Responsive Image Resizer is an ultra-light, cross-browser jQuery responsive image plugin that dynamically swaps the image source to load the proper image depending on the current screen size.

How to use it:

1. Prepare your images with different sizes and insert the original image into the webpage as this:

• img.jpg: original image
• img-768.jpg: image to load when the screen size is less than 768px
• img-992.jpg: image to load when the screen size is less than 992px
• img-1200.jpg: image to load when the screen size is less than 1200px
• img-xxxx.jpg: image to load when the screen size is less than xxxxpx

<img src="img.jpg" alt="demo">

2. Include jQuery library and the minified version of the Responsive Image Resizer plugin at the bottom of the webpage.

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

3. Call the plugin on the 'img' tag and specify the breakpoints as follow:

$('img').ResponsiveImageResizer({
  width: '768, 992, 1200, xxxx'
});

---

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