Images, pictures, photos and illustrations.

Does my browser support WebP and/or AVIF?

A quick check to see if your browser or application support the modern image formats WebP and 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 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>

HTML code to check for WebP

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 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>

HTML code to check for AVIF

Files

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