I want to use tag and 3 image formats. avif \ webp \ png. At the same time, but not to forget about retina displays.
At the moment I came up with something like this format:
<picture>
<source srcset="components/header/img/logo.avif, components/header/img/[email protected] 2x" type="image/avif">
<source srcset="components/header/img/logo.webp, components/header/img/[email protected] 2x" type="image/webp">
<img class="someClass" src="components/header/img/logo.png" srcset="components/header/img/[email protected] 2x" alt="Logo">
</picture>
But how much of this is correct ? Maybe it should be implemented in some other way ?
In the end I got a design that works with both image switching to source (we can get avif\webp for browsers that support it) and srcset which allows us to output x1 or x2 images for different displays.
path to files only for example :)
<picture>
<source srcset="components/features/img/icon-5.avif 1x, components/features/img/[email protected] 2x" type="image/avif">
<source srcset="components/features/img/icon-5.webp 1x, components/features/img/[email protected] 2x" type="image/webp">
<img class="someClass" src="components/features/img/icon-5.png" alt="Icon" srcset="components/features/img/icon-5.png 1x, components/features/img/[email protected] 2x">
</picture>