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.
Browser support
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!