picture html

1.md

WebP provides consistently smaller file sizes than its alternatives. In a comparative study of these image formats, it was found that WebP lossy images were on average 30% smaller than JPGs and WebP lossless images were on average 25% smaller than PNG.

<picture>
    <source type="image/webp" srcset="image.webp">
    <source type="image/jpeg" srcset="image.jpg">
    <img src="image.jpg" alt="My Image">
</picture>

To provide an alternate image source, we use the element within the element. The element has a number of attributes we can use to define the image and when it should be used:

• type: The MIME type of the source
• srcset: The path to the image file. Multiple files can be used to provide different image sizes/densities (see Responsive Images - The srcset and sizes Attributes)
• sizes: A list of sizes of each source file (see article above)
• media: A media query that will determine when the image is used (see article above)

In addition to the various <source>s, a regular <img> element must also be provided as a fallback for browsers that do not support multiple file formats via the element.