Web development and performance
What is AVIF?
AVIF is a modern image format based on the AV1 video codec, typically 30 to 50 percent smaller than WebP at equivalent quality. Every current major browser supports it, and a picture element handles older ones by falling back automatically.
Also called: AV1 Image File Format
When the difference is worth it
On image-heavy pages — product catalogues, portfolios, galleries — the saving is substantial and directly improves LCP. On a page with one small illustration, the encoding time costs more than the bytes save.
The safe implementation
- picture element with AVIF, then WebP, then JPEG or PNG as the img fallback
- Width and height on the img so nothing shifts
- srcset with several widths, because sizing beats format every time
- Generate at build time and commit the output, so nothing re-encodes on every deploy
The catch worth knowing
AVIF encoding is slow. On a large catalogue this belongs in a build step or an image CDN rather than in a request path, or you have moved the cost from bandwidth to time-to-first-byte.
Where this is covered in depth
A definition can only go so far. Image SEO: findable images that do not wreck your page speed covers this properly — 3 minutes, free, no email required.
Who wrote this
Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada and Pakistan. These definitions come from client work rather than from a content brief — where an entry describes a mistake, it is usually one found on a real site. More about how I work.