AVIF

Compression, particularly at low bitrates, where AVIF degrades into softness rather than into the blocking artefacts JPEG produces.

Colour: 10- and 12-bit depth, wide gamuts and high dynamic range, none of which JPEG can express.

Transparency, with alpha support in both lossy and lossless modes.

Large flat areas and synthetic graphics, where the saving against both JPEG and WebP is largest.

Film grain synthesis, inherited from the video codec, which reproduces grain from a parameter rather than storing it — the case where JPEG is forced to spend the most bytes on the least structured detail.

Encoding time. Producing an AVIF can take ten to fifty times as long as a WebP for the same image, depending on the effort setting.

That makes it a poor fit for images encoded per request, and a good fit for a build step or an image service that encodes once and caches.

Decoding is also more expensive than JPEG, though not enough to matter on current devices for ordinary page images.

Tooling maturity: encoders continue to improve substantially, and results vary more between them than they do for JPEG.

Progressive rendering: a JPEG can be encoded to appear in increasing detail as it downloads, which AVIF does not do, so a large AVIF on a slow connection shows nothing until it is complete.

Supported by every current major browser, with Safari adding it in version 16. Coverage is slightly behind WebP for older installed versions.

The `<picture>` element is the standard mechanism: a `source` with `type="image/avif"` first, a WebP `source` second, and a JPEG or PNG `img` as the final fallback.

Browsers select the first `source` whose type they support, so the order in the markup is the preference order.

Content negotiation from the `Accept` header is the alternative, keeping one URL per image and deciding on the server.

Image-heavy sites where bytes translate directly into cost or into loading metrics: catalogues, galleries, publications.

Sites already running an image pipeline, where adding a format is a configuration change rather than a project.

It is less compelling for a site with a handful of images, where moving from JPEG to WebP captures most of the available saving.

Measure rather than assume: for some images, particularly small ones with fine detail, a well-tuned WebP is competitive and encodes far faster.

Check the encoder's effort setting before concluding anything. The difference between the fastest and slowest settings is both large and entirely under your control, and a disappointing result is usually a fast setting rather than the format.