Multiple image types support with picture

A test responsive image 
<picture>
    <!-- Here are the desktop entries -->
    <source type="image/webp"
            media="(min-width: 600px)"
            srcset="desktop-600x300.webp 600w,
                    desktop-1200x600.webp 1200w"
            sizes="50vw">
    <source type="image/png"
            media="(min-width: 600px)"
            srcset="desktop-600x300.png 600w,
                    desktop-1200x600.png 1200w"
            sizes="50vw">

    <!-- Here are the mobile entries -->
    <!-- Note the PNG version is handled by the fallback img. -->
    <source type="image/webp"
            srcset="mobile-600x600.webp 600w,
                    mobile-1200x1200.webp 1200w"
            sizes="80vw">
    <img class="example-img"
         alt="A test responsive image"
         src="mobile-1200x1200.png"
         srcset="mobile-600x600.png 600w,
                 mobile-1200x1200.png 1200w"
         sizes="80vw"/>
</picture>

You can configure support for multiple image types by using the type attribute on <source> elements. The value should be the MIME type of the image, then the values in srcset should contain those types of images. The browser will only ues a <source> if it supports the image type.

The type attribute works in conjunction with the media attribute. This mean you need to provide all the different combinations you want to use of devices and image types.

Match order

Remember that the first matching <source> will be used, so specify the most efficient image formats first.