Practical Responsive Images
Responsive Websites need Responsive Images
WebP Fallback

WebP is not broadly supported (caniuse:webp), and < picture > gives us a good fallback mechanism for cases where it is not supported.

In this example, I'll be requesting the .webp asset, and will be specifying .jpg fallbacks in the case where WebP is not supported.
(The images have text in the top corner indicating which format they are in)


            <picture>
                <type="image/webp" srcset="images/lilypad_600.webp" />

                <img src="images/lilypad_600.jpg" alt="Lily pad" />
            </picture>
        

View source of the demo for further details

Demo: WebP Fallback