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 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 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 file. I leave them here visible on the page, you might want to downlaod and play around.

Read more

WebP and AVIF, the challengers of JPG

Check support for your own browser. The most common image formats are JPG and PNG . WebP is on the rise, a format strongly recommended by Google. The WebP (weppie) format is good at further compressing photos. AVIF, is much newer and actually a derivative of video formats. AVIF also produces

Digital Creator Rob HoeijmakersRob Hoeijmakers

For images on the web stick with JPG and PNG. For now.

Want to keep it safe? Just go with the flow and choose JPG or PNG.

Digital Creator Rob HoeijmakersRob Hoeijmakers