Web Performance

AVIF

An image format smaller than WebP again, with wide but not universal browser support.

AVIF is an image format derived from the AV1 video codec, typically 20 to 30 percent smaller than WebP at similar quality and far smaller than JPEG. Every current major browser supports it, but older versions do not — so it is served through a picture element with a WebP or JPEG fallback rather than on its own.

Definition

AVIF compresses better than WebP, particularly on photographic content, and supports transparency, wide colour and HDR. The trade-off is encoding time: producing AVIF is markedly slower than producing WebP, which matters for a build step or an on-the-fly image service.

Because support is wide but not universal, AVIF is normally offered as the first source in a <picture> element, with the browser falling back automatically.

Why It Matters

Images are usually the largest part of a page's weight, so a further 20 to 30 percent off the format that already halved it is one of the biggest remaining wins for Largest Contentful Paint.

Example

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="…" width="1200" height="630">
</picture>

AVIF against WebP, in practice

AVIF typically produces files 20 to 30 percent smaller than WebP at comparable quality, and the gap is widest on photographic content with smooth gradients — precisely the hero images that tend to be a page's LCP element.

The costs are encoding time and tooling. AVIF encoding is markedly slower than WebP, which matters for a build step processing thousands of images or an image service converting on demand. Some older tooling also handles AVIF's colour and transparency edge cases imperfectly.

The pragmatic position for most sites: WebP as the baseline, AVIF for the handful of large images where the extra saving is worth the encode, both behind a <picture> element with a JPEG fallback.

How SlapMyWeb checks this

The audit reports each image's format, transfer size and the dimensions it is displayed at, so an oversized JPEG is flagged with the saving available from resizing and converting it. It does not require AVIF specifically — what it checks is whether a modern format is being served to browsers that accept one, which is what the Accept header negotiation exists for.