Mimeo Demo - A jQuery plugin for responsive images.


View Documentation

Basic

Simply markup your images using the proposed <picture> structure. The nested <img> source attribute should be set to the smallest source to reduce initial page load on mobile devices. Don't forget to set the image's width and height in CSS to maintain proper dimensions as the source changes.

$.mimeo();
<picture>
	<source media="(min-width: 500px)" src="image-med.jpg">
	<source media="(min-width: 740px)" src="image-large.jpg">
	<source media="(min-width: 980px)" src="image-x-large.jpg">
	<source src="image-small.jpg">
	<img src="image-small.jpg">
</picture>
Demo

Mimeo will work with any valid media query, however you may have to adjust the order of the source tags since they will be read top down.

<picture>
	<source media="(max-width: Infinity)" src="image-x-large.jpg">
	<source media="(max-width: 980px)" src="image-large.jpg">
	<source media="(max-width: 740px)" src="image-med.jpg">
	<source media="(max-width: 500px)" src="image-small.jpg">
	<source src="image-small.jpg">
	<img src="image-small.jpg">
</picture>
Demo

IE Support

When supporting IE you will need to include a HTML5 enabler and matchMedia polyfill (IE 8, IE 9). IE 9 also has a strange bug where source tags will only exist inside of a video tag. Instead of source tags, use a span with the class mimeo-source:

$.mimeo();
<picture>
	<span class="mimeo-source" media="(min-width: 500px)" src="image-med.jpg"></span>
	<span class="mimeo-source" media="(min-width: 740px)" src="image-large.jpg"></span>
	<span class="mimeo-source" media="(min-width: 980px)" src="image-x-large.jpg"></span>
	<span class="mimeo-source" src="image-small.jpg"></span>
	<img src="image-small.jpg">
</picture>
Demo

Note: This example will work in all browsers, but is the only example that will work in IE 9.