JPEG vs WebP vs AVIF: Which Image Format Wins?

Short answer: AVIF wins on file size, WebP wins on practicality, and JPEG wins on nothing except ubiquity. I encoded the same 1920×1080 test image in all three formats on Linux on October 27, 2026. At roughly similar quality (around 31 dB PSNR), AVIF came out at 150 KB, WebP at 235 KB, and JPEG at 371 KB — so AVIF was about 60% smaller than JPEG and 36% smaller than WebP. The catch is encoding speed: AVIF took about 7 seconds per image on this machine, while JPEG and WebP each took under half a second. If you run a website, the format you choose is a trade-off between download size, encoding effort, and browser support — not a single obvious winner.

How I Tested

Every format started from the same master: a 1920×1080 PNG (667 KB) generated with Pillow — gradient, coloured shapes, and fine noise, deliberately hard to compress. One synthetic image kept the comparison fair, but it is a limitation: real photos, screenshots, and logos compress differently, so treat my percentages as the shape of the result, not a promise.

I encoded JPEG and WebP with Pillow 10.2.0 (quality 90 and 80, plus WebP lossless), and AVIF with FFmpeg 8.1.2 (libaom-av1, CRF 30 and 45). I decoded every output back to PNG and scored it against the master with FFmpeg's PSNR filter — a standard metric in decibels where higher means closer, pixel for pixel, to the original. It is not a perfect stand-in for what your eyes notice, but with file size it tells a clear story. Tests ran on an Ubuntu 24.04 VM with 2 CPU cores and no GPU.

The Results: Size and Quality Side by Side

Three findings jump out.

First, WebP beats JPEG on both axes at once. WebP at quality 90 (321 KB, 32.13 dB) is both smaller and higher-quality than JPEG at quality 90 (540 KB, 31.40 dB) — a 41% size saving with a better PSNR score. WebP at quality 80 repeats the trick against JPEG at quality 80: 235 KB versus 371 KB (37% smaller) at a higher PSNR (31.69 versus 30.48 dB). In no setting did JPEG win; its remaining edge is universal support.

Second, AVIF is in a different league on size — if you don't push it too far. AVIF at CRF 30 (150 KB, 31.07 dB) is roughly the same quality as JPEG quality 80 and WebP quality 80, yet 60% smaller than the JPEG and 36% smaller than the WebP — a saving that visibly speeds up a photo-heavy page. But AVIF at CRF 45 shows the cliff edge: 25 KB is 93% smaller than JPEG quality 80, yet PSNR falls to 27.35 dB, a drop you would expect to see as softening and lost detail.

Third, lossless WebP is a genuine PNG replacement. It encoded the master at 505 KB versus PNG's 667 KB — 24% smaller — with a bit-for-bit identical result. If you serve screenshots or logos as PNG today, switching to lossless WebP is a free size win with zero quality cost.

The AVIF Catch: Encoding Speed

AVIF's size win costs encoding time. On this 2-core VM, each AVIF encode took about 7 seconds (7.3s at CRF 30, 7.0s at CRF 45), versus 0.07s for JPEG quality 90 and 0.41s for WebP quality 90 — roughly 18× slower than WebP and 100× slower than JPEG.

For a website that cost is paid once at publish time, while visitors download the small file thousands of times — so 7 seconds per image is tolerable for a blog, but a real problem for on-the-fly encoding like user uploads, where WebP is the safer default.

Browser Support: The Deciding Factor for the Web

According to Can I Use, AVIF works in Chrome 85+, Firefox 93+, and Safari 16.4+ (partial in 16.1–16.3) — fine for up-to-date browsers, risky for very old devices. WebP's support is older and broader; check the Can I Use WebP page if your audience skews old.

The practical answer is to serve AVIF first with WebP and JPEG as fallbacks, using the HTML <picture> element:

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

Browsers pick the first format they understand, so modern visitors get AVIF and everyone else still sees the image.

The Commands I Used

JPEG and WebP came from a short Python script with Pillow:

from PIL import Image
im = Image.open("master.png")
im.save("photo.jpg", format="JPEG", quality=80)
im.save("photo.webp", format="WEBP", quality=80)
im.save("photo-lossless.webp", format="WEBP", lossless=True)

AVIF came from FFmpeg:

ffmpeg -i master.png -c:v libaom-av1 -crf 30 -cpu-used 4 -pix_fmt yuv420p photo.avif

Quality was measured by decoding each output and running FFmpeg's PSNR filter against the master. To reproduce this, swap in your own photo as the master — the ranking held across every setting I tried, though exact percentages will move with your content.

One more difference: JPEG has no transparency support, while WebP and AVIF do — so for transparent graphics the choice is WebP vs AVIF, and AVIF wins on size.

Which Format Should You Use?

• Use AVIF for website photos where page weight matters and you encode once at publish time. It gave the smallest files at comparable quality in every comparison I ran.
• Use WebP as your default for most of the size saving with fast encoding, broad support, and lossless mode for graphics. It beat JPEG everywhere in my test and is the lowest-risk upgrade.
• Keep JPEG only for maximum compatibility — email, old software, or pipelines where you cannot control what opens the file. On the web, serve it as the <picture> fallback, not the main format.
• Use WebP lossless instead of PNG for screenshots, diagrams, and logos. In my test it was 24% smaller with identical pixels.

FAQ

Is AVIF better than WebP? On file size, yes — AVIF at CRF 30 was 36% smaller than WebP at quality 80 at similar quality. On encoding speed and very old browsers, WebP is easier.

Is WebP better than JPEG? Yes on both: WebP quality 90 was 41% smaller than JPEG quality 90 with a higher PSNR score. JPEG's edge is compatibility, not quality.

Does converting to AVIF or WebP lose quality? Any lossy setting loses some information — that is what PSNR measures. At the settings I tested the loss was small (around 31 dB) and the savings large. For zero loss, use WebP lossless or keep the PNG.

Will AVIF work in all browsers? Not all — according to Can I Use, AVIF needs Chrome 85+, Firefox 93+, or Safari 16.4+ for full support. Use a <picture> element with WebP and JPEG fallbacks so older browsers still get an image.

Is it worth converting my existing JPEGs? For a website, usually yes: my test suggests 40–60% smaller files and faster pages. Keep the originals as backups, and serve the new formats with fallbacks rather than replacing the only copy.

Conclusion

JPEG is not a bad format — it is a 30-year-old format doing a job newer formats now do better. My test gave a clean ranking: AVIF smallest, WebP in the middle, JPEG largest, with WebP beating JPEG on quality too. For a modern website, use AVIF first, WebP second, JPEG as fallback — the size win where it counts, and nobody gets a broken image. If you only make one change, switch PNG graphics to lossless WebP and web photos to WebP: both are quick, safe, and measurably smaller.

How this article was made

On October 27, 2026, I generated a 1920×1080 synthetic test image with Pillow 10.2.0 on an Ubuntu 24.04 VM (2 cores, no GPU) and encoded it as JPEG (q90, q80), WebP (q90, q80, lossless), and AVIF (FFmpeg 8.1.2, libaom-av1, CRF 30, 45). I measured file sizes and PSNR against the master with FFmpeg's PSNR filter, and timed the encodes (AVIF about 7 seconds per image; JPEG and WebP under half a second). Browser support figures come from Can I Use's AVIF page and Can I Use's WebP page, checked on the day of writing; format background was checked against Google's WebP documentation and the web.dev AVIF guide. This article was drafted with AI assistance and every number in it comes from the tests above; no benchmark was invented or borrowed.