WebP vs AVIF

AVIF is smaller again; WebP encodes faster and is supported further back.

Choose WebP when

When encoding time matters — a site generating thumbnails on upload — or when you need support in older browsers and tools without a fallback.

Choose AVIF when

For the smallest file at a given quality, especially on photographs, and for wide colour and high dynamic range, which WebP cannot carry.

The thing that catches people out

AVIF encoding is slow, sometimes by an order of magnitude. That is invisible for one image and very visible for ten thousand.

What WebP to AVIF actually does

A generated landscape with a low sun and three ridges, used to show what JPEG does to continuous tone. Shown as WebP.

WebP14 KB

A generated landscape with a low sun and three ridges, used to show what JPEG does to continuous tone. Shown as AVIF.

AVIF17 KB20% larger

A photographic scene — smooth gradients, soft edges, grain. This is the case AVIF is designed for or against, and the figures show which. Both images are drawn in code and encoded by the same converter that runs on this page, so the sizes are this site's own output.
A generated badge: a circular gradient on a transparent background with a white bar across it, used to show what each format does with transparency and with hundreds of shades. Shown as WebP.

WebP4 KB

A generated badge: a circular gradient on a transparent background with a white bar across it, used to show what each format does with transparency and with hundreds of shades. Shown as AVIF.

AVIF3 KB21% smaller

A transparent background and a gradient across the shape. AVIF either keeps both, keeps one, or fills the transparency with a solid colour — which is the difference that catches people out. Both images are drawn in code and encoded by the same converter that runs on this page, so the sizes are this site's own output.
A generated application window with a sidebar, a table and a bar chart, used to show what JPEG does to flat colour and hard edges. Shown as WebP.

WebP11 KB

A generated application window with a sidebar, a table and a bar chart, used to show what JPEG does to flat colour and hard edges. Shown as AVIF.

AVIF5 KB2.1× smaller

Flat colour and hard edges, as in an interface, a chart or a logo. Very different behaviour from the photograph above, and the reason the answer is "it depends what is in the file". Both images are drawn in code and encoded by the same converter that runs on this page, so the sizes are this site's own output.

Side by side

WebPAVIF
Full nameWebP ImageAV1 Image File Format
Extension.webp.avif
Media typeimage/webpimage/avif
CompressionEither, depending on the settingEither, depending on the setting
This site can write itYesYes

Decided? Convert it here

Where these figures come from

The claims this page makes about WebP and AVIF are checkable, and these are the documents that settle them.