- Instant help with your Html coding problems

Use webP images in HTML

Question:
How to use webP images in HTML?
Answer:
<picture>
  <source srcset="myimage.webp" type="image/webp">
  <img src="myimage.png" alt="My image">
</picture>
Description:

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.

Share "How to use webP images in HTML?"
Tags:
picture, image, img, webp, jpeg, png
Technical term:
Use webP images in HTML