Using HTML5’s picture element now!

Serving optimal images for all possible screensizes is a huge challenge. Screens can differ not only in size, but in resolution, pixel density and proportions (landscape vs. portrait). HTML5’s <picture> element can take care of all of your responsive and multimedia needs.

The only downside right now is (you guessed it) support is still seriously lacking (+/- 50% according to caniuse). By using a polyfill we can all be happy campers and coders.

<script src="//cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.1/picturefill.min.js" async></script>

<picture>
	<source media="(min-width: 1200px)" srcset="logo-large.jpg, logo-large-2x.jpg 2x">
	<source media="(min-width: 800px)" srcset="logo.jpg, logo-2x.jpg 2x">
	<source media="(min-width: 450px)" srcset="logo-small.jpg, logo-small-2x.jpg 2x">
	<img src="logo-fb.jpg" srcset="logo-fb-2x.jpg 2x" >
</picture>

https://github.com/scottjehl/picturefill

More (code snippets) about the picture element soon!