Responsive Images Replacement with jQuery and HTML5 - Mimeo

File Size: 14.3 KB
Views Total: 1448
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Responsive Images Replacement with jQuery and HTML5 - Mimeo

Mimeo is a responsive and mobile-first jQuery plugin that automatically load the appropriate image based on media queries as the window resized.

See also:

How to use it:

1. Include jQuery javascript and jQuery mimeo plugin in the page.

<script src=""></script>
<script src="jquery.bp.mimeo.js"></script>

2. Specify the different breakpoints in combination with the image source it should use.

<source media="(max-width: Infinity)" src="">
<source media="(max-width: 640px)" src="">
<source media="(max-width: 320px)" src="">
<source src="">
<img src=""> 

3. For support of IE8/9, you should use <span> instead of <source>. Don't forget to include the required js files to fix in IE8/9.

<!--[if LTE IE 9]>
<script src="ie/html5.js"></script>
<!--[if IE 9]>
<script src="ie/matchMedia.ie9.js"></script>
<!--[if LTE IE 8]>
<script src="ie/matchMedia.ie8.js"></script>

<span class="mimeo-source" media="(min-width: 960px)" src=""></span> 
<span class="mimeo-source" media="(min-width: 640px)" src=""></span> 
<span class="mimeo-source" media="(min-width: 320px)" src=""></span> 
<span class="mimeo-source" src=""></span> <img src=""> 

4. Set the initial width of your images in CSS to make them responsive.

picture, picture img {
width: 100%;

5. Call the plugin.

$(document).ready(function() {
selector: "picture" // "Target Selector"

Change log:

v3.0.9 (2014-08-09)

  • Actually making new selector option work

v3.0.7 (2014-07-29)

  • Fixing IE bug

v3.0.5 (2014-03-08)

  • Fixing IE9 shenanigans

v3.0.4 (2014-02-13)

  • Adding srcset support;

v3.0.1 (2013-01-07)

  • Adding "change.mimeo" event to target picture elements;

v3.0.0 (2013-01-05)

  • Fixing demo and example

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