jQuery Plugin For Responsive Image Delivery - Image Replacer

Image Replacer is a minimalist jQuery plugin designed for responsive web layout that helps you deal with responsive image delivery depending on the custom breakpoints.

See also:

• Lazy Loading and Multi-serving Image Plugin with jQuery - lazyResp
• Responsive Images Replacement with jQuery and HTML5 - Mimeo
• jQuery Plugin To Load Proper Image Based On Screen Size - Data Img
• Easy jQuery Responsive Image Plugin - Respify
• Easy Responsive Image Replacement Plugin - Responsive Images
• jQuery Responsive Image Plugin - Responsive Img

How to use it:

1. Load the jQuery image replacer plugin after you have jQuery library included.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="imageReplacer.min.js"></script>

2. Use data-* attributes of your img tag to define the image sources for different screen resolutions.

<img src="normal.jpg" 
  data-sm="images/sm.jpg" 
  data-md="images/md.jpg" 
  data-lg="images/lg.jpg" 
  data-xl="images/xl.jpg"
>

3. Call the plugin on the image selector and done.

$(window).imageReplacer();

4. You can customize the breakpoints for image auto swapping during initialization. The default values are:

$(window).imageReplacer({

// custom breakpoints
xl: {
  min:1600
},

lg: {
  min:1024,
  max:1599
},
md: {
  min: 800,
  max: 1023
},
sm: {
  max: 799
},

// default breakpoint
default: 'xl',

// Run the javascript on load to detect if already at a smaller size. 
onload:true

});

---

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