media example with one webp source qualified with a type attribute.

Note: Picturefill can support SVG, WebP, JPEG-XR, JPEG-2000 and APNG types on any source element, and will disregard a source if its type is not supported in a particular environment. This option will only work if picturefill is built by setting the support-types grunt task correctly when building picturefill. For example, to support all these formats, build picturefill with this grunt task:

grunt support-types:svg:webp:jxr:jp2:apng

If you wish to remove support for any of these formats, take them out of support-types task. If you wish picturefill to support none of these alternative formats, you can leave out the support-types task out of the grunt build altogether. Remember that to ensure these images are loaded correctly by picturefill, you will need to properly configure your web server's MIME types to support these formats.

<picture>
     <!--[if IE 9]><video style="display: none;"><![endif]-->
     <source srcset="../examples/images/large.webp" media="(min-width: 400px)" type="image/webp">
     <source srcset="../examples/images/large.jxr" media="(min-width: 800px)" type="image/vnd.ms-photo">
     <source srcset="../examples/images/large.jp2" media="(min-width: 800px)" type="image/jp2">
     <source srcset="../examples/images/large.jpg" media="(min-width: 800px)">
     <source srcset="../examples/images/medium.jpg" media="(min-width: 200px)">
     <!--[if IE 9]></video><![endif]-->
     <img srcset="../examples/images/small.jpg" 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