AVIF is a modern image format based on the AV1 video format and generally has better compression than WebP, JPEG, PNG and GIF. This format is designed to supersede them. Unfortunately, the support for AVIF in web browsers is still not as high as it is for WebP format.
So if we want to use AVIF on our website, it is wise to also provide an easy fallback for other browsers.
The easiest method to do is by using
<picture> <source srcset="images/logo.avif" type="image/avif"> <img src="images/logo.png" id="logo" alt="IT Nota Logo example"> </picture>
That’s all there is to it. You can check which image is loaded using your browser developer tools.
If you use an IIS server, you need to add this new image type into the MIME Type before you can serve AVIF format on your page.
Further Reading
How to Serve AVIF Image on IIS
How to Serve WebP Image Format with Fallback for Other Browsers
How to Serve WebP Image on IIS
