AVIF and WebP: Choosing the Right Image Format for Speed
AVIF, WebP or the older JPEG and PNG: which format suits which image, and how automatic format conversion actually speeds up a website.
rabbitclip teamPublished: 4 min read
Short answer
AVIF suits photo-heavy images, WebP suits anything needing wide browser support with transparency, and JPEG or PNG stay on as a fallback for the older browsers that read neither. Serving all three at once is done with the picture element or server-side automatic conversion; the visitor does nothing extra, their browser simply receives the smallest file it can read.
A spa chain's gallery page loading as a run of high-resolution JPEGs can take several seconds to appear. Serve the same images as AVIF or WebP and the file size drops noticeably; according to web.dev's measurements, lossless WebP images run about 26% smaller than PNG, and lossy WebP comes in 25 to 35% smaller than an equivalent JPEG.
What are AVIF and WebP, and how do they differ from JPEG?
AVIF is an open-source image format built on the AV1 video codec; it produces a much smaller file at the same visual quality as JPEG. WebP, developed by Google, supports both lossy and lossless compression plus transparency; its browser support is wider than AVIF's.
Both are built to replace the older JPEG and PNG formats, but they are not interchangeable. AVIF compresses harder but takes longer to encode; WebP encodes faster and runs in more browsers. Most sites serve both, in priority order.
Which format suits which image?
The right format depends on what the image actually is: a photograph, a logo, an icon and an animation each perform better in a different format.
- Photos and product shots: AVIF first, WebP as the fallback
- Transparent logos and icons: WebP, since it supports transparency in both lossy and lossless mode
- Simple drawings and flat-colour graphics: SVG, no raster format needed at all
- Short animations: an animated WebP in place of a GIF
How to set up automatic conversion
The simplest route is the picture element; the browser is offered AVIF, then WebP, then JPEG in order and picks the first one it supports. Setup can sit at one of three levels.
- On a Next.js site the built-in Image component generates the right format per request automatically, no extra setup needed
- On WordPress or a static site, tools such as sharp or squoosh-cli generate AVIF and WebP copies at build time
- At CDN level, an image service picks the format itself with a format=auto option, based on what the requesting browser supports
- In all three routes the original JPEG or PNG stays as a fallback, so no browser is ever left without an image
Why is a fallback still needed?
AVIF and WebP run in the large majority of current browsers, but older browser versions on corporate networks, some email clients and in-app previews may not recognise either format. An AVIF image published without a fallback simply does not appear on those clients; it turns into a broken icon.
MDN's image format guide recommends a fallback alongside every new format for this reason; the picture element or server-side content negotiation makes that fallback automatic, no need to upload every image twice by hand.
Automatic format delivery at CDN and hosting level
Leaving the conversion to the CDN rather than the build process means the source image stays untouched while the format served adapts to the browser on its own. Cloudflare's image optimisation services do this with a format=auto option; a browser that supports AVIF gets AVIF, one that does not gets WebP instead.
The detail worth watching is which service is actually in use; Cloudflare retired its older Polish service for new zones during 2026, pointing new setups towards Image Resizing and Cloudflare Images instead. Which service sits behind a site directly decides whether AVIF is even on offer.
Common mistakes
Setting up conversion once does not close the subject; three mistakes still show up regularly.
- Publishing AVIF with no fallback, losing the image entirely on older clients
- Leaving compression at its most aggressive setting without checking quality by eye
- Uploading a source image far larger than its actual display size, which bloats the file whatever format it ends up in
- Converting the format but never setting width and height in the HTML, which causes layout shift while the page loads
Choosing between AVIF and WebP is not a speed trick on its own; the right format only pays off alongside the right size and a fallback. A discovery call with rabbitclip is a good way to measure how much image weight is actually slowing your site down.
FAQ
Is AVIF always better than WebP?
For file size, usually yes, but it takes longer to encode and runs in fewer browsers. Most sites serve both, with AVIF first.
Should PNG and JPEG be dropped altogether?
No, they should stay on as a fallback. Older browsers and clients still need them.
Does changing image format affect SEO?
Not directly, but faster pages help Core Web Vitals scores and, indirectly, user experience signals.
When should SVG be used instead?
For logos, icons and flat-colour drawings; being vector rather than raster, it stays sharp at any size and is usually smaller too.
