With the release of Chrome 38 stable, responsive images are here. Now of course if the browser being used to view your site isn’t Chrome 38 then you’ll need a polyfill to add the missing functionality to the less functional browser.
From the site they describe picturefill as:
I just wanted to highlight this polyfill as I believe it to be important in the willingness of developers to adopt responsive image, and adopting responsive images is increasingly essential as more and more people use more and more devices to access more and more content (phew!).
I do want to pull out one fact from the documentation for developers who don’t like to RTFM as they may misinterpret the hack requirement for the polyfill not working.
In IE9 (ah lovely IE9) there is a strange requirement of wrapping the <source> tags of the <picture> element within a <video> element! Because that makes sense to IE9! It looks like this
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="examples/images/large.webp" media="(min-width: 800px)" type="image/webp">
<source srcset="examples/images/large.jpg" media="(min-width: 800px)">
<source srcset="examples/images/medium.jpg" media="(min-width: 400px)">
<!--[if IE 9]></video><![endif]-->
<img srcset="examples/images/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">