Does my browser support WebP and/or AVIF?

WebP support

If your browser supports WebP the label on the image will indicate this and a green check will be shown.

If the image label says WebP the browser supports the format, when the label says JPG the browser does not support and falls back on JPG. A red cross appears.‌

Here is the simplified HTML.  I use it in this page. It requests a WebP image and has the JPG as fallback. ‌

<picture>
      <source srcset="Amsterdam-WebP.webp" type="image/webp">
      <source srcset="Amsterdam-JPG.jpg" type="image/jpeg">
      <img src="Amsterdam-JPG.jpg" alt="Amsterdam" style="width:100%">
  </picture>

AVIF support

If the browser supports AVIF the label on the image will indicate this and a green check will be shown.

If the image label says AVIF the browser supports the format, when the label says JPG the browser does not support and falls back on JPG. A red cross appears.‌

Here is the simplified HTML. I use it in this page. And again, it now requests an AVIF image and has the JPG as fallback. ‌

  <picture>
    <source srcset="=Amsterdam-AVIF.avif" type="image/avif">
    <source srcset="=Amsterdam-JPG.jpg" type="image/jpeg">
    <img src="=Amsterdam-JPG.jpg" alt="Amsterdam" style="width:100%">
  </picture>

Files

In order to get this working on this blog page, I uploaded the different formats as a file. I leave them here visible on the page, you might want to download and play around.‌

Read more

I wrote two blog articles on image formats. One goes into a bit of depth on WebP and AVIF, the other article is a bit older and I recommend people to stick to JPG and PNG. But the times are changing, not sure if that article aged well.