WebP and AVIF on your website: measured savings, browser support and fallbacks

How much WebP and AVIF save, according to the people who measured

You run a blog or a small store, your product shots weigh around 400 KB apiece, and someone told you WebP or AVIF will cut that in half. The percentages that get repeated everywhere trace back to a handful of published tests. Here they are, with the fine print.

What that means for a 400 KB photo

Google's range puts the WebP between 264 and 300 KB; the AOM figure puts the AVIF under 200 KB. That's arithmetic on averages, not a guarantee. The WebP study scored quality with a computed index (SSIM), not a shopper's eye, and the AVIF number comes from the group that maintains the format. The figure that counts is the size of your own file after you convert it.

Which browser versions display WebP and AVIF

Per caniuse data checked in September 2026, WebP displays for about 96.8% of global usage and AVIF for about 95.4%. The minimum versions:

Where AVIF still falls short

Edge didn't display AVIF until version 121, and an iPhone still on iOS 15 can't open it. That's why AVIF should never be the only file you put on the page.

AVIF has no progressive rendering: per MDN, the file has to download completely before it can be displayed.

How to serve a fallback with picture and the type attribute

The picture element lets the browser choose. Each source names its format in the type attribute; a browser that doesn't recognize the type skips that line without requesting the file. It uses the first source it can display, so list the lightest format first and the most compatible last.

1. Open the block: <picture>
2. Lightest option first: <source srcset="photo.avif" type="image/avif">
3. Second option: <source srcset="photo.webp" type="image/webp">
4. Fallback for everyone else: <img src="photo.jpg" alt="Blue sneaker, side view" width="800" height="600">
5. Close the block: </picture>

Why the img can't be left out

The chosen image renders in the img element's box, the img carries alt, width and height, and a browser that doesn't understand picture simply loads its src. Google Search's documentation also asks for that img with a src as the fallback.

What image weight has to do with Largest Contentful Paint

Largest Contentful Paint (LCP) reports when the largest visible element on the screen finishes rendering. web.dev's target is 2.5 seconds or less at the 75th percentile of page loads, and on 73% of mobile pages that element is an image (2024 Web Almanac, as cited by web.dev).

web.dev splits LCP into four parts: server response (TTFB), the wait before the image download starts, the download itself, and the wait to paint. Swapping JPEG for WebP or AVIF shortens only the download, and that's usually the smallest part. In Chrome's field data, most sites with poor LCP spend less than 10% of that time downloading the image. Typical values for that group: 2,270 ms of server response, 1,290 ms of waiting, 350 ms of download.

Converting still pays off in total weight. In the 2024 Web Almanac, the median mobile page weighed 2,311 KB, and the median mobile home page loaded 900 KB of images. Just don't expect a format change to rescue a poor LCP by itself.

Don't put loading="lazy" on the main image at the top of the page: web.dev warns that lazy-loading the LCP image always delays it.

WordPress, Shopify, Wix and Squarespace: what the platform already does

On Shopify, Wix and Squarespace the format is handled for you; what's left is uploading a file with sensible dimensions that fits the limit. On WordPress without a plugin, or on a hand-built site, converting is your job.

• WordPress: has accepted WebP uploads since version 5.8 (July 2021) and AVIF since 6.5 (April 2024), provided the server's image library (Imagick or LibGD) supports the format. Check under Tools → Site Health → Info → Media Handling. Per the developer notes for those releases, resized copies keep the format you uploaded; converting JPEGs takes a plugin or custom code.
• Shopify: picks the format at delivery. If the shopper's browser supports WebP or AVIF, that's what it gets (AVIF was added in August 2022). Uploads can be up to 20 MB.
• Wix: the help center says an uploaded image is automatically converted to AVIF on the live site.
• Squarespace: the help center says uploaded images are converted to WebP by default, with a toggle to turn that off. It accepts .jpg, .gif, .png and .webp files up to 20 MB and recommends 500 KB or less.

When converting isn't worth it

• Tiny icons and logos: MDN says to prioritize the SVG version whenever an icon has one. And 30% off a 2 KB file is 0.6 KB, which is nothing on a page that weighs more than 2,000 KB.
• Images that are already well compressed: Google's WebP FAQ warns that converting a JPEG saved at quality 80 to WebP at quality 95 will usually produce a larger file. If the size didn't drop, keep what you had.
• Screenshots, diagrams and artwork with text: MDN recommends lossless encoding, because blurring and colored fringes around text and sharp edges are very visible. Compare before you give up the PNG.
• Email: in caniemail's tests, Outlook for Windows (2007 through 2019) displays neither WebP nor AVIF, and Gmail converts both to JPEG. For newsletters and order confirmations, send JPEG or PNG.

Three things to know before you convert the whole folder

AVIF usually takes longer to encode

In a 2020 test by Jake Archibald that web.dev cites, encoding a single image in Squoosh took anywhere from a few seconds to more than 10 minutes depending on the effort setting (an especially slow case, by his own account). In 2023, web.dev reported that encoding speed had improved significantly and that, with multiple threads, AVIF performs about as well as older formats like WebP for common use cases. In that same article's chart, it is still the slowest encoder for on-the-fly conversion.

A converted JPEG is a second generation

A JPEG already discarded information when it was saved; turning it into lossy WebP or AVIF discards more. In 2016, Jon Sneyers showed on Cloudinary's blog that every additional JPEG encoding adds loss, even at a higher quality setting than the original, and that WebP suffers from it even more. The test predates AVIF, but the working rule is the same: convert from the source file if you still have it.

Keep the originals

WebP and AVIF are delivery files. The original is your img fallback, the file you send by email, and the way to re-export everything at a different quality later.

On LivreImage, WebP export works in browsers that can encode WebP. The site does not produce AVIF today: the AVIF output button only appears when the browser reports that it can encode AVIF, and in our tests of September 2026 Chrome could not, so for that format you need another encoder. The WebP conversion runs on your own device: in JPG to WebP and PNG to WebP, compare each file's size before and after.