Mimeo Demo

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

Source Set

Mimeo will also auto-detect srcset attributes and assign the proper source based on the current device's pixel ratio:

<picture>
	<source media="(max-width: Infinity)" srcset="image-x-large.jpg 1x, image-x-large-hr.jpg 2x">
	<source media="(max-width: 980px)" srcset="image-large.jpg 1x, image-large-hr.jpg 2x">
	<source media="(max-width: 740px)" srcset="image-med.jpg 1x, image-med-hr.jpg 2x">
	<source media="(max-width: 500px)" srcset="image-small.jpg 1x, image-small-hr.jpg 2x">
	<source srcset="image-small.jpg 1x, image-small-hr.jpg 2x">
	<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 can only exist inside of a video tag. The fix is to simply wrap the picture tag in an IE9 conditional video tag:

<!--[if IE 9]>
<video>
<![endif]-->
<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>
<!--[if IE 9]>
</video>
<![endif]-->