Load The Proper Image On Window Resize - Responsive Image Resizer

Load The Proper Image On Window Resize - Responsive Image Resizer
File Size: 1.33 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.