AVIF vs WebP vs JPG: File Size, Support and When to Use Each

AVIF vs WebP: AVIF usually makes the smallest files, often noticeably smaller than WebP and roughly 30–50% smaller than JPG at similar quality. WebP is close behind, encodes much faster and is supported by more software. JPG makes the biggest files but works everywhere, including every upload form. For a website, AVIF or WebP with a fallback is a good choice; for forms, printing and sharing, use JPG.

The short comparison

File-size savings vary a lot from image to image. Detailed photos with fine texture benefit less; smooth photos and illustrations benefit more. Test a few of your own images rather than relying on any single number.

File size comparison: how much smaller?

There is no fixed ratio, but broad patterns hold:

• WebP vs JPG: lossy WebP is typically around a quarter to a third smaller than a JPG of similar quality.
• AVIF vs JPG: AVIF is often 30–50% smaller.
• AVIF vs WebP: AVIF usually wins, with the biggest gains at lower quality settings, where WebP and JPG show blockiness and AVIF tends to blur smoothly instead.

The easiest way to compare is to try it. Convert the same photo with JPG to AVIF and JPG to WebP, look at both side by side, and compare the file sizes the tools show. Both run in your browser, so you can test your own images without uploading them.

Browser support

All current major browsers display both formats. The difference is how long they have:

• WebP: supported in Chrome for many years, in Firefox since 2019, and in Safari since version 14 (2020).
• AVIF: supported in Chrome since 2020, Firefox since 2021, Safari since version 16 (2022), and Edge since early 2024.

So WebP covers slightly more old devices, especially older iPhones and Macs that never updated. For most sites today, both are safe as long as you provide a fallback.

The fallback pattern

With the HTML <picture> element, the browser picks the first format it supports:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Description" width="1200" height="800">
</picture>

Many CMS plugins and image CDNs do this automatically by checking what the browser accepts.

Outside the browser

Support outside browsers is where AVIF still lags:

• Upload forms: exam, job and government portals almost always want JPG/JPEG (sometimes PNG). Neither WebP nor AVIF is safe.
• Desktop apps: recent Windows and macOS can open both, though Windows may need a free extension for AVIF. Older systems often cannot.
• Messaging and social apps: they usually re-encode whatever you upload, so the format you send matters less.
• Printing services: expect JPG.

If you receive an AVIF or WebP you cannot use, convert it with AVIF to JPG or WebP to JPG.

Encoding speed

AVIF trades speed for size. Encoding a large photo to AVIF can take several seconds, where JPG and WebP take a fraction of a second. For a handful of images on a blog, that does not matter. For a site generating thousands of images on the fly, it can.

Our converters encode AVIF with the browser's own encoder when available, and a WebAssembly build of libavif otherwise, so speed depends on your device.

Quality: where each format struggles

• JPG shows blocky artefacts and halos around sharp edges at low quality.
• WebP at low quality can smear fine detail and colour.
• AVIF at low quality tends to look smooth or slightly waxy, losing fine texture like skin, grass or fabric, but rarely looks blocky.

At high quality, all three look good for photos. For text, screenshots and logos, lossless modes or PNG are better than any lossy format.

When to use each format

Converting PNG to AVIF

PNG files are lossless and heavy. If you publish transparent product images or illustrations, PNG to AVIF keeps the transparency and usually shrinks the file dramatically. Use 85% or higher for images with text or thin lines, or 100% for lossless output.

What about JPEG XL?

JPEG XL is another modern format with strong compression, lossless JPG recompression and high-quality output. Browser support is still arriving, so for now it is more of an archiving and future-facing option. See our JPEG XL guide.

A practical setup for site owners

1. Resize first to the largest size the image is displayed at. This often saves more than the format change.
2. Generate AVIF and WebP copies from your original JPG or PNG.
3. Serve them with a fallback using <picture> or your CMS.
4. Keep the originals to regenerate later.

Our faster website image guide covers resizing and compression in more depth.

Common mistakes

• Converting JPG to AVIF and deleting the JPG. Keep originals; many tools and people still need JPG.
• Using AVIF on forms. It will be rejected or fail to upload.
• Low-quality lossy settings on logos. Edges blur. Use lossless or PNG.
• No fallback on a website. Older browsers will show broken images.
• Comparing sizes at different quality levels. Compare images that look equally good, not the same slider number, since quality scales differ between formats.

For the web, AVIF is the smallest and WebP the easiest; for everything else, JPG still wins on compatibility.

Questions