Picturefill

A responsive image polyfill

Officially endorsed by the RICG

The picture element

<picture>
  <source srcset="../examples/images/extralarge.jpg" media="(min-width: 1000px)">
  <source srcset="../examples/images/art-large.jpg" media="(min-width: 600px)">
  <img srcset="../examples/images/art-medium.jpg" alt="…">
</picture>

Supporting Picture in Internet Explorer 9

While most versions of IE (even older ones!) are supported well, IE9 has a little conflict to work around. To support IE9, you will need to wrap a video element wrapper around the source elements in your picture tag. You can do this using conditional comments, like so:

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="../examples/images/extralarge.jpg" media="(min-width: 1000px)">
  <source srcset="../examples/images/art-large.jpg" media="(min-width: 600px)">
  <!--[if IE 9]></video><![endif]-->
  <img srcset="../examples/images/art-medium.jpg" alt="…">
</picture>

Here's how that renders in the browser. Feel free to resize to see it change.

A giant stone face at The Bayon temple in Angkor Thom, Cambodia