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
<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.
Further Reading
How to Serve WebP Image on IIS
How to Serve AVIF Image on IIS
How to Serve AVIF Image Format with Fallback for Other Browsers
Thank you!
I have tried that…It seems WordPress sites need more efforts
Do you know how to make it work in Worpdress without any plugins?
Thanks!
Hi Iryna,
Unfortunately, other than programming the function in PHP yourself, I don’t see any other way to do it without a plugin. But there are some good plugins that can perform this without much effort.
This was very good advice, and I will come back to look at your site again. I have just done a responsive image / picture gallery and needed this type of advice. Please keep up the good work.