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.
Reference:
The picture element reference
Share "How to use webP images in HTML?"
Related snippets:
Tags:
picture, image, img, webp, jpeg, png Technical term:
Use webP images in HTML