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>