jQuery Plugin For Responsive Image Delivery - Image Replacer

File Size: 3.45 MB
Views Total: 493
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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" 

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


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


// custom breakpoints
xl: {

lg: {
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. 


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