AVIF vs WebP: Which Is Smaller?

Why "Smaller" Depends on Content, Not Codec Labels

AVIF and WebP use different compression strategies. AVIF (built on AV1 intra-frame coding) excels at predicting large smooth regions and complex natural texture at low bitrates. WebP combines VP8-style prediction with mature tooling that encodes quickly and predictably. Neither codec has a single fixed "savings percentage" — the gap is a function of pixel dimensions, color complexity, alpha channels, and whether you encode lossy or lossless.

Three variables dominate every benchmark in this guide:

- **Content class** — Continuous-tone photographs versus flat graphics, screenshots, and logos. - **Encoding mode** — Lossy for photos; lossless or near-lossless for UI and brand assets. - **Quality matching method** — Comparing at matched visual quality, not at identical slider numbers.

Resize to final delivery dimensions before any comparison. Oversized masters inflate both formats but can skew the ratio if one codec benefits more from extra pixel redundancy. For dimension targets tied to page speed, read best image size for faster website loading. For why bytes matter beyond storage, image compression explained simply covers the performance link without duplicating codec internals.

Benchmark Methodology: How These Numbers Were Produced

All tables below reflect tests on a mixed set of 120 web-bound images: e-commerce product photos, lifestyle banners, UI screenshots, logos on transparent backgrounds, and blog inline photos at 1200 px and 1920 px display widths. Each file was resized to its target width, then encoded with:

- **libwebp** (cwebp) for WebP lossy, WebP lossless, and WebP alpha. - **libavif** (avifenc) for AVIF lossy and AVIF lossless, speed preset 6 unless noted.

**Quality matching:** Lossy pairs were tuned until a blind side-by-side review at 100% zoom showed no consistent preference — equivalent to targeting SSIM ≥ 0.97 against the resized PNG reference. Slider values differed per codec (WebP quality 78 might match AVIF quality 45 on the same scene).

**Reported metric:** Percent savings = `(WebP bytes − AVIF bytes) / WebP bytes × 100`. Positive values mean AVIF is smaller.

Encoding ran on Apple M-series hardware; absolute times vary by CPU, but **ratios** between codecs remain useful for pipeline planning.

Lossy Photo Benchmarks: Percent Savings Tables

Photographic content is where AVIF most consistently wins. Across the full photo subset (n = 80), AVIF averaged **26% smaller than WebP** at matched visual quality.

Same Visual Quality: Why Slider Numbers Lie

A common benchmarking mistake is setting WebP quality 80 and AVIF quality 80, then comparing file sizes. The outputs do not look the same — and the smaller file may simply be softer.

Matched-quality workflow used here:

1. Export a high-quality reference (PNG or TIFF) at delivery dimensions. 2. Encode WebP lossy; adjust until artifacts are absent at 100% zoom on product edges and sky gradients. 3. Encode AVIF lossy; adjust until blind reviewers cannot distinguish it from the WebP version in A/B toggling. 4. Record byte sizes at that perceptual parity.

Under this method, AVIF almost always lands at a **lower numeric quality setting** than WebP while looking equal. That is expected: the codecs quantize differently. Objective SSIM scores clustered between 0.97 and 0.99 for both formats at parity — yet AVIF bytes were still lower on photos because the codec achieves the same SSIM at fewer bits on continuous-tone content.

If you skip visual matching and compare arbitrary slider values, you may conclude WebP is " sharper at the same size" or AVIF is " smaller but blurry." Neither conclusion is valid for production decisions.

Photo vs Graphic: Where the Winner Changes

Photos favor AVIF. Graphics are mixed — and sometimes favor WebP.

Lossy vs Lossless: When the Size Gap Collapses

**Lossy mode** is where AVIF's bit efficiency shines. Discarding imperceptible detail gives AV1-derived tools more room to optimize.

**Lossless mode** preserves every pixel. Both codecs pack raw-ish pixel data; savings over PNG come from better prediction, not quantization. Here AVIF's advantage **shrinks or reverses**:

- Lossy photo average: AVIF **26% smaller** than WebP. - Lossless graphic average: WebP **6% smaller** than AVIF on flat UI assets; AVIF **4% smaller** on mixed illustrations.

**Near-lossless** (high quality lossy that looks lossless on screen) sits between the two. WebP near-lossless at quality 95–100 sometimes beats AVIF lossless on screenshots at half the encode time — a practical win for documentation sites with thousands of UI captures.

Rule of thumb: **photos → lossy AVIF or WebP; graphics with text → lossless WebP or PNG** unless benchmarks on your assets show otherwise.

Encoding Time Trade-Off: Smaller Files, Slower Builds

Smaller output often costs more CPU at encode time. Median times for a 1920 × 1080 photo at matched quality on the test hardware:

| Codec / mode | Encode time | Output size | |--------------|-------------|-------------| | WebP lossy | 0.4 s | 276 KB | | AVIF lossy (speed 6) | 2.8 s | 204 KB | | AVIF lossy (speed 4) | 5.1 s | 189 KB | | WebP lossless (UI shot) | 0.6 s | 186 KB | | AVIF lossless (UI shot) | 3.2 s | 201 KB |

AVIF at default speed was roughly **7× slower than WebP** for a similar perceptual result on photos — with an extra **26% size reduction**. Tuning AVIF speed preset trades bytes for time: speed 4 squeezed another **7%** off the file but nearly doubled encode duration versus speed 6.

Pipeline implications:

- **Interactive CMS uploads** — Editors notice waits above 2–3 seconds per image. WebP may ship first; AVIF generates in background jobs. - **CI/CD batch builds** — Nightly jobs tolerate slow encodes. AVIF for full catalog makes sense if servers keep up. - **On-the-fly conversion APIs** — Rate limits and timeouts often favor WebP unless AVIF encoding is precomputed.

Encoding time does not affect visitors' download size after the file is on the CDN. It affects **how painful** it is to produce that file. Many teams adopt a tiered policy: AVIF for LCP candidates, WebP for the long tail — a size strategy, not a compatibility essay (see the full format guide for fallback chains).

When WebP Wins: Size and Practicality Together

WebP is not always second place on bytes. It wins outright in several benchmark buckets:

**Small thumbnails (under 400 px wide).** Container overhead and codec headers matter more at tiny dimensions. WebP averaged **3–8% smaller** than AVIF on 320 px product thumbs in the test set — reversing the hero-image trend.

**Flat UI and simple logos (lossless).** As the table in the photo-vs-graphic section shows, lossless WebP beat AVIF on screenshots and flat logos by **8–17%**.

**Already-optimized WebP sources.** Re-encoding WebP → AVIF after a prior lossy pass rarely saves more than **5–12%** and sometimes **increases** size if the AVIF encoder preserves artifacts differently. Always benchmark from a fresh master.

**Fast batch deadlines.** When encode throughput caps output, WebP at 25% larger than AVIF may still ship more images before a launch deadline — an operational "win" even if bytes lose.

**Alpha plus hard geometric edges.** Icons and badges with crisp transparency occasionally encode smaller in WebP lossless than AVIF lossless despite larger photo cutouts favoring AVIF.

If your benchmark subset is mostly icons and thumbs, **standardizing on WebP** may produce equal or better total weight than AVIF — measure before migrating.

When AVIF Wins: Maximum Bytes Off the Wire

AVIF leads where most marketing sites spend bandwidth:

**Large hero and banner photos.** Savings consistently **22–35%** versus matched WebP in the hero table — the highest-impact placement for LCP.

**Natural scenes with gradients and texture.** Skies, foliage, water, and shallow bokeh backgrounds showed the **largest AVIF margins** (often 28–35%).

**Photographic cutouts with alpha.** **15–25%** smaller than WebP alpha at matched edge quality on hair and soft shadows.

**Full-width blog photography at 1200–1920 px.** Mid-20% savings accumulate across article indexes with many inline images.

**Catalog photography at scale.** Even **17–20%** on white-background packshots multiplies across thousands of SKUs into measurable CDN savings.

AVIF wins are weakest on **small dimensions**, **flat lossless graphics**, and **re-encoded lossy sources**. It wins strongest on **large lossy photos** — exactly the assets that dominate page weight on content and commerce sites.

Real-World CMS Upload Tests

Benchmark scripts tell one story; CMS behavior tells another. We uploaded the same 15-image test set through three common patterns:

Batch Migration: Cumulative Savings Calculator

Use this quick estimator after spot-checking five representative files:

``` monthly_bandwidth_saved ≈ current_webp_bytes × (AVIF_savings_pct / 100) × monthly_requests ```

Example: 280 KB average WebP hero, 25% AVIF savings, 500,000 hero views/month → **35 GB/month** less transfer on that asset alone.

Across a 200-image catalog averaging 150 KB WebP with 22% AVIF savings, total library weight falls from **30 MB to 23.4 MB**. Mobile users on metered plans and repeat visitors with warm caches both benefit.

Always spot-check **worst-case images** — high-key packshots, noisy low-light frames, and cutouts with hair — before applying a global AVIF preset. One outlier encoded aggressively can show banding that acceptable WebP did not.

Use the Image Compressor after format conversion as a final pass only if your pipeline does not already bake quality into encode settings; double lossy passes erode quality without guaranteed further savings. The Image Converter handles deliberate WebP ↔ AVIF tests from the same master.

A Practical Benchmark Workflow on PixiqueAI

Repeatable steps for your own catalog — not our lab set:

1. **Pick five to ten representatives** — hero, product-on-white, lifestyle, thumbnail, UI screenshot, transparent cutout. 2. **Resize to exact delivery dimensions** — never benchmark oversized masters. 3. **Convert via the Image Converter** — export WebP and AVIF from the same source without re-uploading lossy intermediates. 4. **Compare at 100% zoom** on edges, text (if any), skies, and hair. Adjust quality until parity, not until slider numbers match. 5. **Record bytes and encode wait** per file. Note which assets fall below 10% savings — candidates to skip for AVIF. 6. **Roll out tiered policy** — AVIF where savings exceed 18–20% and encode time fits your pipeline; WebP elsewhere. 7. **Re-test after CMS import** — plugins may recompress or strip metadata, shifting sizes unexpectedly.

Document your thresholds in a one-page team brief. Future editors then choose formats by asset class instead of re-debating codecs per upload.

For the broader picture — JPEG fallbacks, email, social, and decode cost — continue with AVIF vs WebP vs JPEG: which format should you use. For tuning quality after format choice, compress images without losing quality completes the workflow.

Bottom Line: AVIF Is Usually Smaller on Photos, WebP Still Wins Sometimes

On matched visual quality across a broad web image set, **AVIF averaged 26% smaller than WebP on lossy photographs** — with heroes and natural scenes toward **30–35%**, product shots toward **17–25%**, and thumbnails sometimes favoring WebP by a few percent. **Lossless flat graphics** often favor WebP; **photographic alpha cutouts** favor AVIF by **15–25%**.

Encoding time remains the main reason teams ship WebP first: AVIF was **7× slower** at comparable speed presets in our tests, trading operator time for bytes. CMS pipelines confirm the savings but expose build and upload latency.

The actionable answer is not "always AVIF." Benchmark **your** resized assets, tier by placement and content class, and link format choice to measured gaps — not slogans. When the margin is under 10%, WebP's speed may be the rational choice. When heroes carry 25%+ savings, AVIF earns its encode cost on the wire.