What are AVIF and WebP compared?

AVIF (AV1 Image File Format) and WebP are two modern raster image formats that compress significantly better than JPEG and PNG. WebP was released by Google in September 2010, based on the VP8 video codec, and reached 100 percent modern browser support after Safari added it in iOS 14 (September 2020). AVIF was standardized by the Alliance for Open Media in February 2019, based on the AV1 video codec, and reached broad browser support when Safari 16 added it in September 2022. AVIF compresses photos roughly 20 to 30 percent smaller than WebP at the same visual quality and 50 percent smaller than JPEG, while WebP is 25 to 35 percent smaller than JPEG. Both support transparency (alpha channel), animation and lossless compression. AVIF supports HDR (high dynamic range), 10 and 12 bit color depth, and wide color gamut. WebP encoding is 10 to 20 times faster than AVIF, which still matters for sites that resize many images at upload time. For a typical product image, JPEG might be 180 KB, WebP 110 KB and AVIF 75 KB at the same visual quality.

How big is the file size difference in practice?

The Cloudinary 2023 image format report and independent benchmarks by Jake Archibald (Google) found these typical savings at the same SSIMULACRA2 quality score on a set of photographic test images:

For graphics, logos, icons and screenshots (areas of flat color), the spread is even larger. AVIF lossless can be 30 to 50 percent smaller than PNG, WebP lossless is 20 to 30 percent smaller than PNG.

What is the browser support?

Both formats are now safe to use in production with a fallback chain.

How do I serve AVIF with WebP fallback?

Use the HTML <picture> element. The browser picks the first <source> it supports and falls back to the inner <img>:

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

For responsive images, add srcset with multiple widths inside each source:

<picture>
  <source
    type="image/avif"
    srcset="hero-400.avif 400w, hero-800.avif 800w, hero-1200.avif 1200w"
    sizes="(max-width: 800px) 100vw, 1200px">
  <source
    type="image/webp"
    srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
    sizes="(max-width: 800px) 100vw, 1200px">
  <img
    src="hero-800.jpg"
    srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
    sizes="(max-width: 800px) 100vw, 1200px"
    alt="Product photo"
    width="1200" height="800"
    loading="lazy" decoding="async">
</picture>

How do I convert images to AVIF and WebP?

• Command line: cwebp (from libwebp) and avifenc (from libavif), both available via brew, apt and yum.

  cwebp -q 80 hero.jpg -o hero.webp
  avifenc --min 25 --max 35 hero.jpg hero.avif

• Sharp (Node.js): the standard image library for Next.js, Astro and Gatsby. Supports both formats out of the box.
• ImageMagick (convert): convert hero.jpg -quality 80 hero.webp. AVIF support since ImageMagick 7.0.25 (2020).
• Squoosh (squoosh.app): free web app by Google for one off conversions, runs entirely in the browser.
• libvips: very fast image processing library used by many CMS pipelines.
• CDN on the fly conversion: Cloudflare Images, Cloudinary, imgix, Bunny Optimizer, Statically. The CDN converts to AVIF or WebP based on the Accept header of each request.

How does WordPress handle AVIF and WebP?

WordPress 5.8 (July 2021) added WebP upload support to the Media Library. WordPress 6.5 (April 2024) added AVIF upload support. Direct upload requires the right libraries on the server:

• WebP needs GD with WebP support (PHP 7.1+ with libwebp) or Imagick with libwebp. Most modern hosts ship this.
• AVIF needs Imagick 7.0.25 or newer with libheif and libavif (or GD with AVIF support in PHP 8.1+). Some shared hosts still lack this in 2025.

Plugins that automate conversion of existing JPEG and PNG to WebP and AVIF:

• ShortPixel: paid, converts to WebP and AVIF in the cloud, integrates with the picture element.
• EWWW Image Optimizer: free + paid, can convert and rewrite URLs.
• Imagify by WP Media: paid, from the makers of WP Rocket.
• Smush by WPMU DEV: free + paid.
• Converter for Media (formerly WebP Converter for Media): free, supports both WebP and AVIF without paid quota.
• Optimole: cloud CDN that delivers AVIF or WebP based on browser.

Cloudflare Polish (paid Cloudflare feature) and Cloudflare Images convert and cache automatically at the edge without any plugin.

When should I use AVIF and when WebP?

• Use AVIF for hero images, large product photos, marketing campaign visuals where every kilobyte counts. Generate at build time, not on the fly.
• Use WebP for the long tail of content images, user uploaded photos, thumbnails. Encoding is fast enough to run on the request path.
• Use both via <picture>: AVIF for browsers that support it (currently 94 percent), WebP for the rest (3 percent), JPEG fallback for the long tail (a handful of legacy clients).
• Skip AVIF for small icons under 5 KB. The header overhead can make them larger than WebP or PNG.
• Skip both for SVG (already a vector format) and animated GIFs (use AVIF, WebP or a real video format like MP4 instead).

What about JPEG XL and HEIC?

• JPEG XL (standardized 2022, ISO/IEC 18181) compresses comparably to AVIF and is faster to encode and decode. Chrome dropped JPEG XL support in 2023 citing low interest. Safari 17 (September 2023) added it. Firefox supports it behind a flag. As of 2025 JPEG XL is mainly a Safari only format on the web.
• HEIC / HEIF: Apple proprietary, used for iPhone camera photos. Not supported by Chrome or Firefox on the web. Convert HEIC to AVIF or WebP before publishing.

Does AVIF have downsides?

• Slow encoding: encoding a 4K AVIF can take 5 to 30 seconds at high quality settings. Use lower effort levels (--speed 6 to --speed 8) for batch conversion.
• CPU intensive decoding: AVIF decoding is heavier than WebP on low end mobile devices, though differences are small for modern phones.
• Animation maturity: animated AVIF works but tooling is less mature than animated WebP.
• Email clients: AVIF support in email clients is still rare. Use WebP or JPEG in email newsletters.
• Open Graph and social previews: Facebook, LinkedIn and X may not render AVIF cards. Provide a JPEG or PNG for og:image and twitter:image.

How does InspectWP help with AVIF and WebP?

InspectWP analyzes every image on the crawled page and reports its format, file size and whether a modern format would save bandwidth. Images that could be served as AVIF or WebP are flagged in the performance section.