Picturefill

A responsive image polyfill

Officially endorsed by the RICG

media and srcset syntax

The 1x, 2x syntax in srcset acts as a shorthand for more complex resolution media queries. When natively supported, srcset will allow the UA to override requests for higher-resolution options based on a bandwidth limitations or a user preference (see #9 in the Responsive Images Use Cases and Requirements).

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="../examples/images/large.jpg, ../examples/images/extralarge.jpg 2x" media="(min-width: 800px)">
  <source srcset="../examples/images/small.jpg, ../examples/images/medium.jpg 2x">
  <!--[if IE 9]></video><![endif]-->
  <img srcset="../examples/images/small.jpg, ../examples/images/medium.jpg 2x" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
</picture>
A giant stone face at The Bayon temple in Angkor Thom, Cambodia