Considering the majority of web users are using Chrome, it’s probably wise to consider using WebP image format on your website. However, since WebP only supported by Chrome and Opera, we also want to utilize an easy fallback for other browsers.
The easiest method to do is by using
element as follow:
<picture> <source srcset="images/logo.webp" type="image/webp"> <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 WebP format on your page.