WebP and AVIF: The Next-Generation Image Formats Explained

For twenty-five years the web ran on three image formats: JPEG, PNG, and GIF. Two newer formats — WebP and AVIF — now do the same jobs with dramatically smaller files. If you serve images on a website, or you just want your photos to take up less space, understanding the difference between these two is worth the ten minutes. This guide covers what each one is, how much you actually save, where each wins, and how to adopt them without breaking anything.

Why new formats appeared at all

JPEG was standardised in 1992. Its compression is good but old; it can't touch what modern video codecs achieve. Both WebP and AVIF borrow their compression engines from video: WebP comes from the VP8 codec, and AVIF comes from AV1, a royalty-free codec designed by a consortium of major tech companies. Video codecs spend enormous effort predicting what a block of pixels should look like from its neighbours, and that same machinery, applied to a single still frame, produces far smaller images than JPEG's 1990s maths.

WebP: the safe, universal upgrade

Google released WebP in 2010. It handles both lossy and lossless compression, supports transparency in both modes, and can even do animation. Its headline numbers, from Google's own benchmarks and independent studies, are consistent: lossy WebP runs about 25–34% smaller than JPEG at matching quality, and lossless WebP about 26% smaller than PNG.

The best thing about WebP in 2026 is that the compatibility argument is over. Every current browser decodes it — coverage sits around 98% globally. Unless you're specifically supporting ancient software, you can treat WebP as a drop-in replacement for both JPEG and PNG. If you want the deeper JPEG-vs-PNG-vs-WebP breakdown, our format comparison guide goes section by section.

AVIF: smaller still, at a cost

AVIF arrived around 2019 and pushes compression further. On typical photographs it often beats WebP by another 20% or more, and it holds up remarkably well at very low file sizes where JPEG would fall apart into blocky artefacts. It also supports wide colour gamut and HDR, which matters for high-end photography.

The trade-offs are real, though. AVIF encoding is slow — compressing an image can take noticeably longer than WebP or JPEG, because the AV1 encoder is doing much more work. Browser support is now broad but arrived later than WebP's, and some tools, social platforms, and email clients still don't accept AVIF uploads. It's the format you reach for when every kilobyte counts and you control how the image is served.

Side by side

Which should you actually use?

Using them safely with fallbacks

On a website, you don't have to pick one format for everyone. The HTML <picture> element lets the browser choose the best format it supports, falling back automatically:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="…">
</picture>

A browser that understands AVIF grabs the AVIF; one that doesn't falls back to WebP; the oldest browsers get the JPEG. Everyone gets the smallest file they can display, and nothing ever breaks. Google's web.dev guidance on serving modern formats walks through the same pattern in more depth.

How to actually create WebP and AVIF files

Understanding the formats is one thing; producing them is another. You have three practical routes, depending on how many images and how much automation you need:

• A browser-based converter — drop a JPG or PNG in, choose WebP as the output, and download the result. Nothing uploads, and it's the fastest path for a handful of images or a one-off batch. AVIF export is less commonly offered because the encoder is heavy, but WebP is universally available.
• Your image editor — recent versions of Photoshop, Affinity Photo, and GIMP can export WebP directly; AVIF support is arriving more slowly.
• A build tool or command line — for a website with hundreds of images, automate it. cwebp and avifenc (from the reference encoders), or an image CDN that converts on the fly, will generate both formats as part of your deploy so you never do it by hand.

Whichever route you choose, convert from the highest-quality source you have — not from an image that has already been through JPEG once. See why re-compression compounds for the reason.

What about JPEG XL?

You may hear a third name: JPEG XL. It's a genuinely promising format — excellent compression, lossless JPEG re-compression, and no generational quality loss — but as of 2026 browser support is still fragmented, with major engines disagreeing on whether to ship it. For anything public-facing today, WebP and AVIF are the two that actually reach your visitors, so this guide sticks to them. JPEG XL is worth watching, not yet worth betting a production site on. When in doubt, the durable advice is unchanged: serve the newest format the visitor's browser accepts, and always keep a widely-supported fallback underneath it.

The bottom line

WebP is the easy win: nearly universal support, roughly a third smaller than JPEG, and no real downside for web use. AVIF is the specialist — smaller still and beautiful at low bitrates, but slower to make and not yet accepted everywhere you might upload. On a site you control, serve AVIF first, WebP second, and JPEG as the safety net, and you'll ship the lightest images possible without leaving anyone behind. For everything that leaves your control — uploads, email, marketplaces — stick with the format the other end is guaranteed to understand.