WebP vs AVIF: Differences & How to Convert Images

What is WebP?

WebP is an image format developed by Google and released in 2010. It supports lossy and lossless compression, transparency and animation. According to Google's tests, lossy WebP is on average 25 to 34 percent smaller than JPEG at equivalent quality, and lossless WebP about 26 percent smaller than PNG.

What is AVIF?

AVIF is newer, released in 2019 by the Alliance for Open Media and built on the AV1 video codec. It also supports transparency and animation, plus higher colour depth (up to 12 bits) and HDR. For photos, AVIF often produces a smaller file than WebP at the same visible quality.

Quick comparison

	WebP	AVIF
Released	2010, Google	2019, Alliance for Open Media
File size	Much smaller than JPG and PNG	Often smaller still, especially for photos
Transparency	Yes	Yes
Animation	Yes	Yes
Colour depth and HDR	8 bit	Up to 12 bit, supports HDR
Encoding speed	Fast	Slower
Browser support	Every modern browser	Modern browsers, not older Safari

Browser support

WebP has long been supported by Chrome, Edge, Firefox and Opera, and by Safari since version 14 (2020). Per-version details: caniuse.com/webp.
AVIF is supported by Chrome since version 85 (2020), Firefox since 93 (2021), Safari since 16.4 (2023) and Edge since 121 (2024). Per-version details: caniuse.com/avif.

So a small share of visitors on iPhones or Macs that haven't been updated can't display AVIF yet. That's why AVIF should always come with a fallback, either WebP or JPG.

When to use which

Photos (products, banners, galleries): AVIF with a WebP or JPG fallback. Usually the biggest saving.
Screenshots and graphics with sharp text: WebP, or PNG if the text must be pixel-perfect. Compare the results by eye.
Short animations: animated WebP or an MP4 video, both far lighter than GIF.
Images created very often, for example user uploads around the clock: WebP, because it's faster to produce.

Three ways to convert images to WebP or AVIF

1. Automatically with an image CDN

The easiest way: upload JPG or PNG as usual and let an image CDN choose the format for each visitor. With Simpanan, add f-auto to the link:

https://cdn.simpananawan.com/tr:w-1200,f-auto/u/you/product.jpg

Browsers that support AVIF get AVIF, others get WebP, and older browsers get JPG. There are no extra files to prepare. More on automatic WebP and AVIF.

2. By hand with Squoosh

Squoosh is a free web app from the Chrome team. Drag an image onto the page, choose WebP or AVIF in the right-hand panel, set the quality, and compare with the slider before downloading. Good for a handful of images.

3. From the command line

For many images at once, command-line tools are faster. Examples with Google's cwebp and ImageMagick:

cwebp -q 80 photo.jpg -o photo.webp
magick photo.jpg -quality 60 photo.avif

Providing a fallback with the picture element

If you convert images by hand, use the <picture> element so each browser picks a format it can display:

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

The browser reads from top to bottom and uses the first format it supports. With an image CDN and f-auto, that choice happens on the server, so a plain <img> tag is enough.

Common questions

Can iPhones display WebP?

Yes. Safari has supported WebP since version 14, which arrived with iOS 14 in 2020. AVIF has been supported since Safari 16.4.

Can Google index WebP and AVIF images?

Yes. Google Search supports both formats, as listed in Google's image SEO guide.

Should I delete my original JPG and PNG files?

No. Keep the originals as your best-quality source. WebP and AVIF versions should be made from the originals, not from earlier conversions.