AVIF vs WebP: Which Image Format Should You Use?

AVIF and WebP are both modern image formats designed to replace JPEG and PNG on the web. Both offer better compression than their predecessors. But they have different strengths, different browser support histories, and different tradeoffs that make each one more or less appropriate depending on your use case.

TL;DR

• Use WebP if you need broad compatibility, fast encoding, and a stable, well-supported workflow. It works in all major browsers and most image-processing tools.
• Use AVIF if maximum compression is the priority and every tool in your pipeline can write it (the tool table below lists which ones do). In our tests below, AVIF came out 21–36% smaller than WebP at matched quality.
• For most web projects today (2026): AVIF for photos, WebP as the fallback in <picture> tags. For logos and UI assets with transparency: WebP or PNG.

Background: Where These Formats Come From

WebP was developed by Google and released in 2010. Lossy WebP is derived from the VP8 video codec; lossless WebP uses a separate format called VP8L that shares nothing with VP8 except the name. Google’s goal was to reduce image file sizes for web delivery while keeping visual quality equivalent to JPEG.

AVIF (AV1 Image File Format) was published by the Alliance for Open Media in 2019. It uses the AV1 video codec — the same codec that powers high-efficiency video streaming on YouTube, Netflix, and other platforms. AV1 is a more advanced codec than VP8/VP9, which is why AVIF achieves better compression than WebP.

Both formats are royalty-free. That is the main reason Chrome and Firefox adopted them and have never shipped HEIC/HEIF, which is tied to HEVC/H.265 patents. Safari is the exception: it decodes HEIC since version 17 (2023), but only on Apple hardware where the OS already carries an HEVC license.

Compression Efficiency

This is the area where AVIF most clearly wins.

Independent benchmarks consistently show AVIF producing files 20–35% smaller than WebP at equivalent visual quality (as measured by SSIM, VMAF, or BUTTERAUGLI). At high quality settings, the difference narrows. At lower quality settings (for thumbnails, previews), AVIF’s advantage grows.

Comparison at medium quality (typical web use):

The WebP figure lines up with Google’s own WebP compression study (WebP files typically 25–34% smaller than JPEG at equivalent quality); the AVIF and PNG figures come from independent third-party benchmarks, since AVIF has no single official Google study behind it.

These numbers vary by image type. AVIF has a particularly large advantage on photographic content. For synthetic images (solid-color illustrations, icons, diagrams), the gap between WebP and AVIF is smaller.

Real File Sizes: AVIF vs WebP on Four Test Images

Percentages quoted from other people’s benchmarks only go so far, so here are numbers from a test run for this article. Four source images: a detailed 1600×1067 landscape photo, a low-detail 1600×1067 photo, a 1440×630 UI screenshot, and a 1200×630 flat-color graphic with text. Each was decoded to PNG, then encoded with cwebp 1.6.0 (-m 6) and avifenc 1.4.2 (libaom 3.14, default speed 6) at several quality settings. Quality was checked with SSIM against the source, so each row pairs a WebP and an AVIF at roughly the same measured quality rather than the same quality number. Sizes are in kilobytes of 1,000 bytes.

In every lossy pairing the AVIF file was smaller and scored equal or higher on SSIM. Two caveats: the two photos started life as JPEGs, so SSIM is measured against the decoded JPEG rather than a camera original, and SSIM is one metric of several. A different image set or a different metric would move the percentages, but not the direction.

Lossless flips the result. WebP’s lossless mode beat both PNG and lossless AVIF on every image. Lossless AVIF only beat PNG on the photo; on the two graphics it came out larger than the PNG it started from:

If you need pixel-perfect output, WebP lossless is the format to reach for; AVIF’s advantage is a lossy-only story.

Encoding time on the same machine (8-core Intel Core i9), for the high-detail photo: cwebp took 0.24 s at default settings and 0.47 s at -m 6. avifenc took 0.35 s at its default speed 6, 2.5 s at speed 3, and 13.4 s at speed 0, and the speed-0 file was only about 1% smaller than the speed-6 one. AVIF’s slow reputation comes from those slow presets. At default settings the gap between the two encoders is small.

Browser Support

As of 2026, both formats have strong browser support, but WebP remains more universally adopted:

Global browser coverage (caniuse.com, checked September 2026): WebP ~97%, AVIF ~95%.

The practical difference is small today, but AVIF still has a longer tail of unsupported older browsers and operating systems than WebP. For mission-critical use cases where every visitor must see the image correctly, WebP remains the safer single-format choice.

The standard modern approach is to serve both: <picture> with AVIF as the primary source and WebP as the fallback, with JPEG or PNG as the ultimate fallback:

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

Browsers pick the first format they support.

Encoding Speed

WebP wins, but by less than its reputation suggests.

WebP encoding is quick and predictable. In the test above, cwebp took 0.24 s at default settings and 0.47 s at -m 6 for a 1600×1067 photo, and there is not much of a slow preset to fall into. Libraries like sharp behave the same way.

AVIF encoding depends almost entirely on the speed preset. avifenc at its default speed 6 took 0.35 s on the same photo, which is in the same range as WebP. Speed 3 took 2.5 s and speed 0 took 13.4 s, and that 13.4 s bought roughly 1% in file size. Most of the “AVIF is slow” reputation comes from benchmarks run at speed 0. There is no GPU path for avifenc or sharp; AV1 hardware encoders exist for video, not for still-image tooling.

For build-time image optimization (Next.js, Gatsby, Astro’s image integration), the encoding cost is paid once and cached, so even a slow AVIF preset is fine. For on-the-fly transforms (Cloudflare Images, Imgix, a CDN that encodes on the first request), the per-image CPU cost still matters, and the Next.js docs note that AVIF takes about 50% longer to encode than WebP in their pipeline.

Decoding Speed

Both formats decode fast in modern browsers. The difference in real-world page load performance is negligible for typical web images.

Transparency (Alpha Channel) Support

Both formats support transparency:

• WebP: Lossless alpha channel or independently compressed alpha. Good support across tools.
• AVIF: Full alpha channel support. The alpha plane is encoded as a separate AV1 stream inside the file.

Browsers, sharp, Pillow (11.2+), and ImageMagick all handle AVIF alpha correctly, and Photoshop has written AVIF natively since version 26.8 (2025). Figma exports neither format without a plugin, so a transparent logo drawn there needs a conversion step whichever of the two you pick.

For transparent assets the two formats are now close on tooling. Pick AVIF where the size saving matters and WebP where a downstream tool might not read AVIF.

Animation Support

Both formats support animation:

• Animated WebP: Supported in every current browser. Google’s own figures put lossy animated WebP at about 64% smaller than the equivalent GIF. It is still larger than the same clip as an H.264 or AV1 video, though.
• AVIF animation: Supported but less common in practice. Encoding animated AVIF is very slow.

For animated images, WebP is more practical today. For short video clips used as GIF replacements, consider HTML5 <video> with AV1 or H.264 — it offers better performance and browser support than either animated image format.

Tool and Ecosystem Support

WebP had roughly a decade’s head start, and until 2025 that showed in the tooling. By 2026 the gap has mostly closed:

Design tool export is the one row where neither format is a given. Figma’s built-in export offers only PNG, JPG, SVG, and PDF, so WebP and AVIF both need a plugin or a separate converter. Photoshop added native WebP in 23.2 (2022) and AVIF in 26.8 (2025), so on the Adobe side the gap has closed.

File Format Details

AVIF’s support for 10-bit and 12-bit color depth and HDR (High Dynamic Range) makes it technically more capable for high-end photography and professional use cases. For standard web images, these capabilities are not relevant.

Which Format for Which Use Case

Use AVIF for:

• Large photographic images where file size has significant impact on page speed
• High-traffic sites where bandwidth savings translate directly to cost savings
• Build-time optimization pipelines where encoding speed is not a constraint
• Projects targeting modern audiences where Safari 16.4+ / Chrome 85+ can be assumed

Use WebP for:

• Projects requiring broad compatibility, especially with older iOS/Safari versions
• Real-time image processing where encoding speed matters
• Pipelines that still run older tool versions (Photoshop before 26.8, Pillow before 11.2) which read WebP but not AVIF
• Cases where you need client-side image generation (canvas-based tools)
• Transparent assets when a downstream tool reads WebP but not AVIF

Use JPEG for:

• Legacy compatibility with very old browsers (IE 11, very old Android)
• Photos embedded in email. Support is uneven: classic Outlook for Windows (2007–2019) renders neither WebP nor AVIF, and Gmail converts both to JPEG on the way in. JPEG is the only format every client displays as sent
• Cases where the toolchain does not support either modern format

Use PNG for:

• Lossless images where every pixel must be perfect
• Transparent images where WebP/AVIF tooling is not available
• Screenshots and UI assets for software documentation
• Source files for further editing

Practical Recommendation for Web Developers in 2026

For most new web projects:

1. Use Astro, Next.js, or Nuxt’s built-in image optimization and turn AVIF on. It is opt-in: Next.js defaults to formats: ['image/webp'] until you add 'image/avif', and Astro’s <Picture> needs formats={['avif', 'webp']}. Once configured, the framework serves the right format per browser.
2. Write <img> tags with src pointing to your original JPEG or PNG; let the framework handle format selection.
3. If you need manual control, use <picture> with AVIF → WebP → JPEG source fallback.
4. For logos and icons with transparency, serve as WebP or PNG. On small flat graphics the AVIF saving is a few kilobytes, and WebP is read by more tools.

Converting Between AVIF and WebP

pixconv does not convert AVIF to WebP directly, but these converters cover the surrounding steps, all in the browser:

• PNG to AVIF Converter — Encode PNG to AVIF (uses libavif compiled to WebAssembly)
• JPG to AVIF Converter — Encode JPG to AVIF
• AVIF to JPG Converter — Convert AVIF to universally compatible JPG
• AVIF to PNG Converter — Convert AVIF to lossless PNG
• WebP to PNG Converter — Convert WebP to PNG
• WebP to JPG Converter — Convert WebP to JPG
• JPG to WebP Converter — Reduce file size by converting JPG to WebP

Related Articles

• WebP vs PNG: Which Format Should You Use?
• What Is WebP Format?
• Batch WebP to PNG Converter