Easy Responsive Image Replacement Plugin - Responsive Images

Responsive Images is a lightweight yet useful plugin that allows to load the appropriate image based on the size of your visitor's viewport. It can help you save the bandwidth for your website and reduce the page load time to improve the user experience.

Basic Usage:

1. Include responsive-img.min.js script at the bottom of your web page.

<script src="responsive-img.min.js"></script> 

2. Insert an image to your web page. Using data-src attribute to set the different breakpoints in combination with the image source it should use.

<img alt='' data-src-base='images/' data-src='<480:smallest.jpg,
						   <768:small.jpg,
						   <960:medium.jpg,
						   >960:big.jpg' /> 

3. Options.

• data-src-base - Adds a specified path before every image source path.
• data-src2x - Can be used instead of data-src if devicePixelRatio is above 1.2 (retina displays).
• data-src-base2x - Can be used instead of data-src-base to specify a custom base path for devices were devicePixelRatio is above 1.2 (retina displays). Can be used in combination with both data-src and data-src-base or either one.

---

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