Use webP images in HTML

<picture>
  <source srcset="myimage.webp" type="image/webp">
  <img src="myimage.png" alt="My image">
</picture>

The HTML <picture> element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.

The browser will consider each child <source> element and choose the best match among them. If no matches are found, or the browser doesn't support the <picture> element then the URL of the <img> element's src attribute is selected. The selected image is then presented in the space occupied by the <img> element.