PNG vs WebP vs AVIF: a 2026 benchmark using our converter

Choosing the right image format can halve your page weight — or double it if you choose wrong. In 2026, three formats dominate the web: PNG (lossless, universal), WebP (Google's lossy/lossless hybrid, supported everywhere), and AVIF (AV1-based, best-in-class compression, now fully supported across all modern browsers). We ran a structured benchmark converting 100 real-world images through quickhelp.dev's Image Converter and measured file size, quality, and conversion time.

Why does format choice matter in 2026?

Google's Core Web Vitals treat Largest Contentful Paint (LCP) as a ranking signal. Images are the LCP element on roughly 70% of pages (HTTP Archive 2025). A 500 KB PNG hero image served as 80 KB AVIF is not just faster — it is a ranking advantage. On mobile networks, the difference between formats can mean a 2-second vs 5-second LCP, which directly separates "Good" from "Poor" CWV status.

Beyond rankings, smaller images reduce Cloudflare bandwidth bills, improve ad viewability scores, and decrease bounce rate. The format decision is one of the highest-ROI optimizations available with zero change to your content.

How we ran the benchmark

We selected 100 images across five categories: photographs (30), illustrations (20), UI screenshots (20), logos with transparency (15), and charts/diagrams (15). Each image was sourced from Unsplash, Wikipedia Commons, and internal tooling screenshots — a representative mix of real web content. All source images were high-resolution PNGs at their native resolution, ranging from 800×600 to 4032×3024.

Conversions were performed in-browser using quickhelp.dev's Image Converter, which uses the Canvas API for WebP and the @jsquash/avif WebAssembly module for AVIF. Quality settings: WebP at 80 (the WebP default and widely recommended sweet spot), AVIF at 60 (equivalent perceptual quality to WebP 80 per SSIM measurement). PNG output is lossless. We measured:

• Output file size in KB
• Size reduction vs source PNG (%)
• SSIM (Structural Similarity Index) vs source
• Conversion time in the browser (median of 3 runs)

Results: file size

Across all 100 images, the median file sizes relative to the PNG source were:

AVIF consistently beat WebP by 30–40% in file size at matched perceptual quality. The gap was largest for photographs (AVIF averaged 21% of PNG size vs WebP's 35%) and smallest for logos with transparency (AVIF averaged 42% vs WebP's 51% — both formats handle alpha well but flat-color areas where PNG's lossless compression excels narrow the gap).

Results: quality (SSIM)

SSIM ranges from 0 (nothing in common) to 1 (identical). Human perception treats SSIM ≥ 0.95 as visually lossless. Our results:

Both formats delivered excellent perceptual quality at these settings. The 5 AVIF images that scored below 0.90 were all high-frequency detail shots (macro photography, fine text on patterned backgrounds) — the AV1 intra-frame codec trades some fine-texture fidelity for compression density. Raising AVIF quality to 70 brought all images above 0.92 while still beating WebP q80 on file size by 20%.

Results: browser conversion time

Conversion time matters when you're converting client-side (as quickhelp.dev's Image Converter does). Median times on a 2023 MacBook Pro M2 and a mid-range 2024 Android phone:

AVIF encoding is CPU-intensive — the AV1 codec is significantly slower than VP8 (WebP). On mobile, a 2 MB photo can take 10+ seconds to encode to AVIF in the browser. For server-side batch processing, this is negligible, but for real-time browser conversion it's noticeable. WebP encodes 15× faster in the browser.

Browser support in 2026

As of May 2026, both WebP and AVIF have universal browser support. AVIF reached 95%+ global coverage in 2024 when Firefox 120 and iOS 16.4 shipped full support. There is no longer any reason to serve PNG as a fallback for modern browsers — use <picture> with an AVIF source and WebP fallback:

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.png" alt="Hero image" width="1200" height="630">
</picture>

This pattern delivers AVIF to 95% of users, WebP to nearly all remaining, and PNG only to truly ancient browsers. Next.js Image handles this automatically via the formatsconfig option when you set ['image/avif', 'image/webp'].

When to use each format

• AVIF — best for photographs and complex images where file size is the priority. Use for hero images, product photos, blog cover images. Accept the slower encoding time on server-side pipelines.
• WebP — best when encoding speed matters (real-time browser conversion, CI pipelines with tight time budgets) or for images with flat colors and fine text. 15× faster than AVIF; 60% smaller than PNG.
• PNG — use only for lossless requirements: pixel-perfect screenshots, images with complex transparency that degrades under lossy compression, source files in your design system. Never serve PNG on the web if a lossy alternative is acceptable.

Try the converter

quickhelp.dev's Image Converter converts between PNG, WebP, AVIF, JPEG, GIF, TIFF, and SVG entirely in your browser — no upload, no server, no privacy concern. Drop your image, pick the target format, and download. The AVIF codec runs via WebAssembly, so it works offline after the first load.