<picture>

Modern format


<picture>
    <source srcset="keyboard.avif" type="image/avif">
    <source srcset="keyboard.webp" type="image/webp">
    <source srcset="keyboard.jpg" type="image/jpeg">
    <img src="keyboard.jpg" alt="Omg a keyboard">
</picture>

The <picture> element supports multiple <source> elements and a single <img> element

Picture perfect images with the modern element

Images are one of the most pervasive parts of the web. This isn't a huge surprise as we humans are quite visual and the tag has been around for almost 30 years. Images are so prominent that they are part of the most important content in over ~70% of pages on both mobile and desktop according to the largest contentful paint metric.

https://stackoverflow.blog/2022/03/28/picture-perfect-images-with-the-modern-element

<picture>

Modern format

Recommendations