AVIF Cove

avif · webp · jpeg xl

AVIF support checker

Find out which modern image formats this browser can actually display. Each check decodes a tiny embedded test image, so the answer comes from the browser itself, not from a version table.

Tested in this tab. Nothing is sent.

Checking AVIF support…Decoding tiny test images in this browser.

FormatThis browser
AVIFStill image, 8-bitChecking…
AVIF with transparencyAlpha channelChecking…
Animated AVIFImage sequence (avis)Checking…
WebPLossy (VP8)Checking…
WebP losslessVP8LChecking…
WebP with transparencyLossy + alphaChecking…
Animated WebPANIM / ANMF framesChecking…
JPEG XLStill imageChecking…
CapabilityThis browser
Save as WebP from canvascanvas.toBlob("image/webp")Checking…
Save as AVIF from canvascanvas.toBlob("image/avif")Checking…
Decoding in background workersOffscreenCanvas + createImageBitmapChecking…
WebAssembly SIMDSpeeds up the WebP encoderChecking…

Your browser

Detecting…

Results reflect this browser only. Older devices, in-app browsers and some corporate setups can differ, which is why a fallback matters.

<picture> fallback generator

Serve AVIF to browsers that support it, WebP to the next tier and JPEG or PNG to everything else. Browsers take the first source they can decode.

Modern formats
Fallback

Files named harbour-640.avif and so on. Leave empty for one size.

Loading

HTML

<picture>
  <source type="image/avif" srcset="/images/harbour-640.avif 640w, /images/harbour-1280.avif 1280w, /images/harbour-1920.avif 1920w" sizes="(max-width: 900px) 100vw, 900px">
  <source type="image/webp" srcset="/images/harbour-640.webp 640w, /images/harbour-1280.webp 1280w, /images/harbour-1920.webp 1920w" sizes="(max-width: 900px) 100vw, 900px">
  <img src="/images/harbour-1280.jpg" srcset="/images/harbour-640.jpg 640w, /images/harbour-1280.jpg 1280w, /images/harbour-1920.jpg 1920w" sizes="(max-width: 900px) 100vw, 900px" width="1920" height="1280" alt="Harbour at dusk" loading="lazy" decoding="async">
</picture>

CSS background

.hero {
  background-image: url("/images/harbour.jpg");
  background-image: image-set(
    url("/images/harbour.avif") type("image/avif"),
    url("/images/harbour.webp") type("image/webp"),
    url("/images/harbour.jpg") type("image/jpeg")
  );
}

How the checks work

Each row loads a test image of a few hundred bytes from inside this page and asks the browser to decode it. If the image decodes to the expected size, the format is supported. This catches cases a version table misses, such as AVIF switched off by policy, an in-app browser using an older engine, or a browser that shows still AVIF but not animated AVIF.

Using the snippet

  1. Export each image in every format and width you list, for example with the AVIF converter, the WebP converter and the image resizer.
  2. Keep the width and height attributes: they reserve space so the page doesn’t jump while images load.
  3. Use lazy loading for images below the fold, and eager loading with high priority for the main image at the top of the page.

Questions

Which browsers support AVIF?

Chrome 85 and later, Firefox 93 and later, Safari 16 and later (iOS 16, macOS Ventura and newer) and Edge 121 and later display AVIF. Very old browsers and some in-app browsers don’t, so keep a fallback.

Is a version table not enough?

Usually it is, but support can be switched off by enterprise policy, and some browsers support still AVIF before animated AVIF. Decoding a real sample answers the question for the exact browser in front of you.

Should I add JPEG XL?

Only if you already produce JPEG XL files. Few browsers display it today, so it must always come with AVIF, WebP or JPEG fallbacks.

Can I use AVIF in CSS backgrounds?

Yes, with image-set() and type(). Browsers that don’t understand image-set() ignore that line and keep the plain url() fallback above it.

Does this page send my browser details anywhere?

No. The tests run locally, and the results and browser name are only shown on this page.

More image tools