How to Serve WebP Image Format with Fallback for Other Browsers

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.

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