Using WebP image format for browsers that support it : Part 2

Almost a decade ago, I wrote about Using WebP image format for browsers that support it.
Now there's a different method to implement this, but not using CSS3 - rather, this is purely based on the new <picture> HTML5 tag.

HTML

<picture>
  <source srcset="https://mywebsite.com/images/cat.webp" type="image/webp">
  <img src="https://mywebsite.com/images/cat.png" loading="lazy"/>
</picture>

HTML 5

Safari which doesn't support webp will load cat.png while other browsers will load cat.webp.
If you are wondering what loading="lazy" is, check out https://web.dev/native-lazy-loading/ - currently supported only in Chrome.