Krunkit
WebP
AVIF
Performance

WebP vs AVIF in 2026: Real-World Compression Benchmarks and Production Guide

A data-driven comparison of WebP and AVIF with real compression benchmarks across photos, illustrations, and screenshots. Includes encoding speed, browser support, and practical production recommendations.

Krunkit Team··11 min read

WebP and AVIF are the two modern image formats competing to replace JPEG and PNG on the web. Both offer superior compression, transparency support, and lossy/lossless modes. But they differ significantly in encoding speed, compression efficiency, browser support, and real-world suitability.

This post presents actual benchmark data across different image categories to help you make an informed decision for your production workflow.

The Basics: What Each Format Brings

WebP was developed by Google and released in 2010. It's based on the VP8 video codec (lossy) and uses a predictive coding approach for lossless compression. After years of slow adoption, WebP finally reached near-universal browser support around 2023.

AVIF is based on the AV1 video codec, developed by the Alliance for Open Media (which includes Google, Apple, Mozilla, Microsoft, Netflix, and others). It was standardized in 2019 and uses more advanced compression techniques including intra-frame prediction, transform coding, and sophisticated entropy coding.

| Feature | WebP | AVIF | |---------|------|------| | Based On | VP8/VP9 | AV1 | | Lossy Compression | Yes | Yes | | Lossless Compression | Yes | Yes | | Transparency | Yes | Yes | | Animation | Yes | Yes (AVIF sequence) | | HDR / Wide Gamut | Limited | Yes (10/12-bit) | | Max Resolution | 16383 x 16383 | 8193 x 4097 (per tile) | | Color Depth | 8-bit | 8/10/12-bit | | Browser Support (2026) | ~97% | ~95% |

Benchmark Methodology

To give you useful numbers rather than theoretical claims, we compressed a test set of 30 images across three categories:

  • Photographs (10 images): DSLR shots with natural scenes, portraits, landscapes. Average source size: 4.2 MB (JPEG from camera).
  • Illustrations (10 images): Vector-style graphics, flat design, charts with solid colors and sharp edges. Average source size: 1.8 MB (PNG).
  • Screenshots (10 images): UI screenshots with text, icons, gradients, and mixed content. Average source size: 2.1 MB (PNG).

All source images were decoded to raw RGBA before encoding to eliminate source format bias. We tested multiple quality settings and measured file size, SSIM (structural similarity), and encoding time.

Benchmark Results: Photographs

Photographs are where both formats shine compared to JPEG, but AVIF pulls noticeably ahead.

File Size Comparison (Target: Visually Lossless, SSIM > 0.98)

| Source (JPEG) | WebP | WebP Savings | AVIF | AVIF Savings | |---------------|------|-------------|------|-------------| | 3.8 MB | 1.42 MB | 62.6% | 0.98 MB | 74.2% | | 4.5 MB | 1.71 MB | 62.0% | 1.15 MB | 74.4% | | 4.1 MB | 1.53 MB | 62.7% | 1.08 MB | 73.7% | | Avg 4.2 MB | Avg 1.58 MB | 62.4% | Avg 1.07 MB | 74.1% |

At equivalent visual quality, AVIF delivers roughly 32% smaller files than WebP for photographs. This advantage comes from AV1's more sophisticated intra-prediction modes — it has over 60 directional prediction angles compared to VP8's limited set.

Quality Ladder (Single Reference Photo, 4.1 MB JPEG Source)

| Quality Setting | WebP Size | AVIF Size | AVIF Advantage | |----------------|-----------|-----------|----------------| | Low (q30) | 89 KB | 58 KB | 35% smaller | | Medium (q50) | 198 KB | 132 KB | 33% smaller | | High (q75) | 512 KB | 348 KB | 32% smaller | | Very High (q85) | 891 KB | 624 KB | 30% smaller | | Near Lossless (q95) | 1.82 MB | 1.31 MB | 28% smaller |

AVIF's advantage narrows slightly at higher quality settings, but it consistently outperforms WebP across the entire quality range for photographic content.

Benchmark Results: Illustrations

Illustrations with flat colors and sharp edges tell a different story. AVIF still wins on compression, but the margin shrinks considerably.

File Size Comparison (Visually Lossless)

| Source (PNG) | WebP | WebP Savings | AVIF | AVIF Savings | |-------------|------|-------------|------|-------------| | 1.6 MB | 312 KB | 80.9% | 268 KB | 83.6% | | 2.1 MB | 445 KB | 79.3% | 401 KB | 81.4% | | 1.7 MB | 338 KB | 80.6% | 295 KB | 83.1% | | Avg 1.8 MB | Avg 365 KB | 80.3% | Avg 321 KB | 82.7% |

For illustrations, AVIF is about 12% smaller than WebP — still an improvement, but less dramatic than with photographs. Both formats are dramatically better than PNG for this content type.

Lossless Compression

When you need pixel-perfect reproduction (logos, technical diagrams), lossless mode matters:

| Source (PNG) | WebP Lossless | AVIF Lossless | |-------------|---------------|---------------| | 1.6 MB | 892 KB | 824 KB | | 2.1 MB | 1.18 MB | 1.09 MB | | 1.7 MB | 978 KB | 901 KB | | Avg 1.8 MB | Avg 1.02 MB | Avg 938 KB |

WebP lossless reduces PNGs by about 43%. AVIF lossless does about 48%. The difference is modest in lossless mode because both formats are limited by the fundamental entropy of the data.

Benchmark Results: Screenshots

Screenshots are a practical test case because they combine photographic regions (images within the UI), sharp text, solid UI elements, and gradients.

File Size Comparison (Visually Lossless)

| Source (PNG) | WebP | WebP Savings | AVIF | AVIF Savings | |-------------|------|-------------|------|-------------| | 1.9 MB | 402 KB | 78.8% | 328 KB | 82.7% | | 2.3 MB | 498 KB | 78.3% | 412 KB | 82.1% | | 2.0 MB | 421 KB | 78.9% | 351 KB | 82.5% | | Avg 2.1 MB | Avg 440 KB | 78.7% | Avg 364 KB | 82.4% |

AVIF achieves about 17% smaller files than WebP for screenshots. One caveat: at aggressive compression levels, AVIF can sometimes produce visible smearing around text edges. If your screenshots are text-heavy, test carefully at your chosen quality level.

Encoding Speed: The AVIF Tradeoff

Here is where AVIF's biggest weakness shows. Encoding AVIF is computationally expensive — dramatically more so than WebP.

Encoding Time (Single 4000x3000 Photo, Single-Threaded)

| Format | Quality 50 | Quality 75 | Quality 90 | |--------|-----------|-----------|-----------| | WebP | 0.8s | 1.1s | 1.4s | | AVIF (speed 6) | 3.2s | 4.8s | 6.1s | | AVIF (speed 4) | 8.5s | 12.3s | 15.7s | | AVIF (speed 1) | 42s | 61s | 78s |

AVIF's speed parameter (0-10, where 10 is fastest) controls the tradeoff between encoding time and compression efficiency. At speed 6, AVIF is roughly 4x slower than WebP. At speed 1 (maximum compression), it's 50x slower.

For most production use, AVIF speed 6 offers the best balance — you get most of the compression benefit without the extreme encoding time. Lower speed values yield diminishing returns: speed 4 might save an additional 5-8% file size over speed 6, while taking 2-3x longer.

Decoding Speed

Decoding is a different story. Both formats decode quickly in the browser:

| Format | Decode Time (4000x3000) | |--------|------------------------| | JPEG | 45ms | | WebP | 52ms | | AVIF | 68ms |

AVIF decoding is slightly slower but still fast enough that users won't notice. The decoding difference is negligible compared to network transfer time savings.

Browser Support in 2026

Browser support is no longer the blocking issue it once was for either format.

Current Support Matrix

| Browser | WebP | AVIF | |---------|------|------| | Chrome 32+ | Yes | Yes (Chrome 85+) | | Firefox 65+ | Yes | Yes (Firefox 93+) | | Safari 14+ | Yes | Yes (Safari 16.4+) | | Edge 18+ | Yes | Yes (Edge 85+) | | Samsung Internet 4+ | Yes | Yes (v14+) | | Opera 19+ | Yes | Yes (Opera 71+) |

WebP sits at approximately 97% global support. AVIF is at approximately 95%. The remaining gap is primarily older Safari versions and some niche browsers. For most production sites, both formats have sufficient support to use with a fallback strategy.

Recommended Fallback Pattern

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

This progressive enhancement approach serves the best format each browser supports. The browser evaluates sources top-to-bottom and picks the first it can handle.

When to Use WebP

WebP is the right choice when:

  • Encoding speed matters. If you're processing images in real-time or on the client side, WebP's faster encoding makes a significant difference. Build pipelines that process thousands of images will complete much faster with WebP.
  • You need broad compatibility. WebP's 97% support means fewer fallback scenarios. If minimizing complexity is a priority, WebP as your single modern format is a reasonable choice.
  • Lossless with transparency. WebP's lossless mode with alpha channel is well-optimized and widely compatible. For UI assets, icons, and logos that need transparency, WebP lossless is excellent.
  • Animation replacement. WebP animations are smaller than GIF and more widely supported than AVIF sequences. For animated content, WebP is the safer choice in 2026.
  • File size limits exist. Some platforms and CDNs have specific format requirements. WebP is accepted in more places than AVIF currently.

When to Use AVIF

AVIF is the right choice when:

  • Maximum compression is the priority. If shaving every kilobyte matters — high-traffic sites, bandwidth-constrained users, mobile-first experiences — AVIF's 25-35% advantage over WebP adds up.
  • Photographic content dominates. AVIF's compression advantage is largest for photographs. A photography portfolio or image-heavy editorial site benefits most from AVIF.
  • HDR or wide gamut content. AVIF supports 10-bit and 12-bit color depth, making it the only viable choice for HDR web content.
  • Encoding happens offline. If images are processed at build time or in a background pipeline, AVIF's slower encoding is less of a concern. Pre-process once, serve forever.
  • You can implement fallbacks. If your stack supports the <picture> element or content negotiation, serving AVIF with WebP/JPEG fallback gives you the best of both worlds.

Production Strategy: Serving Both

The optimal approach for most production sites in 2026 is to generate both formats and serve the best one each client supports. Here's how that looks in practice:

Static Sites / Build Time

Generate AVIF and WebP variants during your build process. Most static site generators and image processing pipelines support this. Use AVIF speed 6 for a reasonable build time, and WebP quality 80 as the baseline.

CDN-Based Content Negotiation

Major CDNs (Cloudflare, Fastly, AWS CloudFront) can inspect the Accept header and serve the appropriate format automatically. This is the simplest approach if your CDN supports it — you upload one source image and the CDN handles format selection.

Client-Side Processing

For tools that process images in the browser, like Krunkit, the encoding speed difference is directly felt by the user. WebP encoding completes in under a second for most images, while AVIF can take several seconds. Offering both options and letting users choose based on their needs is the practical approach.

Practical Recommendations by Use Case

Blog / Editorial Sites

  • Primary: AVIF (q70-80, speed 6)
  • Fallback: WebP (q75-80)
  • Reasoning: Content is authored once and served millions of times. The encoding cost is amortized across all views.

E-commerce Product Images

  • Primary: WebP (q80)
  • Consider: AVIF for hero images and category banners
  • Reasoning: Product catalogs change frequently. WebP's faster encoding reduces pipeline complexity. Use AVIF selectively for high-impact images.

User-Generated Content

  • Primary: WebP (q75-80)
  • Reasoning: Processing speed matters when users are uploading and expecting quick results. WebP's encoding speed is significantly better for real-time processing.

Web Applications / SaaS

  • Primary: WebP (q80) for dynamic content, AVIF for static assets
  • Reasoning: UI assets and marketing images can be pre-encoded as AVIF. Dynamic or user-uploaded content benefits from WebP's speed.

The Verdict

AVIF compresses better. WebP encodes faster and has slightly wider support. Neither format "wins" universally — the right choice depends on your specific constraints.

If you can only pick one modern format and need simplicity, WebP is the pragmatic choice. If you can serve both with fallbacks and your content is primarily photographic, leading with AVIF will deliver measurably better performance.

The good news is that both formats are mature, well-supported, and dramatically better than JPEG and PNG for web delivery. Whichever you choose, you're making a significant improvement over legacy formats.

For quick experimentation, you can test both formats on your own images using Krunkit's compression tool — it runs entirely in the browser using WebAssembly, so you can compare WebP and AVIF output side by side without uploading anything to a server.