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:

• Easy Responsive Image Replacement Plugin - Responsive Images

How to use it:

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.bp.mimeo.js"></script>

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

<picture>
<source media="(max-width: Infinity)" src="http://lorempixel.com/960/720/sports/1/960x720/">
<source media="(max-width: 640px)" src="http://lorempixel.com/640/480/nightlife/1/640x480/">
<source media="(max-width: 320px)" src="http://lorempixel.com/320/240/fashion/1/320x240/">
<source src="http://lorempixel.com/960/720/sports/1/960x720/">
<img src="http://lorempixel.com/960/720/sports/1/960x720/"> 
</picture>

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>
<![endif]-->
<!--[if IE 9]>
<script src="ie/matchMedia.ie9.js"></script>
<![endif]-->
<!--[if LTE IE 8]>
<script src="ie/matchMedia.ie8.js"></script>
<![endif]-->

<picture> 
<span class="mimeo-source" media="(min-width: 960px)" src="http://lorempixel.com/960/720/fashion/1/960x720/"></span> 
<span class="mimeo-source" media="(min-width: 640px)" src="http://lorempixel.com/640/480/nightlife/1/640x480/"></span> 
<span class="mimeo-source" media="(min-width: 320px)" src="http://lorempixel.com/320/240/sports/1/320x240/"></span> 
<span class="mimeo-source" src="http://lorempixel.com/960/720/fashion/1/960x720/"></span> <img src="http://lorempixel.com/960/720/fashion/1/960x720/"> 
</picture>

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

picture, picture img {
width: 100%;
}

5. Call the plugin.

<script>
$(document).ready(function() {
$.mimeo({
selector: "picture" // "Target Selector"
});
});
</script>

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.