WebP Performance Benchmarks: Size and Quality Data

980 words 5 mins read

WebP benchmark data vs JPEG and PNG across photos, graphics, and animations, with quality metrics explained and a workflow to measure your own images.

Concrete benchmark data helps you understand what file size savings to expect when switching to WebP and how to measure quality objectively. The numbers below combine Google’s large-scale corpus study with real-world observations across common image categories, giving you a grounded starting point before you run benchmarks on your own assets.

Google’s Reference Study #

Google published a systematic compression study comparing WebP against JPEG and PNG across a corpus of over one million images drawn from the web. The key findings are:

WebP Lossy vs JPEG #

WebP lossy produces files 25–34% smaller than JPEG at equivalent SSIM (Structural Similarity Index) across photographic images.

WebP Lossless vs PNG #

WebP lossless produces files 26% smaller than PNG on average across a diverse set of web graphics and screenshots.

The full methodology and raw data are available at developers.google.com/speed/webp/docs/webp_study.

Results vary significantly by image content. Photographs, illustrations, screenshots, and animations each behave differently under compression. Always validate published averages against your own image corpus before making infrastructure decisions.

Real-World Savings by Image Category #

The list below summarises observed savings ranges across common web image types. These ranges reflect real-world deployments and community benchmarking; your results will depend on image complexity, colour distribution, and the quality settings you choose.

Photographs — Lossy vs JPEG: 25–34% smaller. Lossless vs PNG: N/A (use lossy).
Screenshots — Lossy vs JPEG: 15–25% smaller. Lossless vs PNG: 20–30% smaller.
Logos / icons — Lossy vs JPEG: 10–20% smaller. Lossless vs PNG: 15–26% smaller.
Illustrations — Lossy vs JPEG: 20–30% smaller. Lossless vs PNG: 18–28% smaller.
Animated images — 40–64% smaller vs GIF.

Run benchmarks on a representative sample of your own images — at least 20–50 files per category — before committing to a format change. Published averages are a useful baseline, but the savings on your specific content may be higher or lower.

Animated images deserve special mention: WebP animation compresses far more efficiently than GIF because it uses inter-frame prediction. A 40–64% size reduction against GIF is common, and the gap widens as animation length increases.

Quality Metrics Explained #

SSIM #

Structural Similarity Index (SSIM) compares luminance, contrast, and structure between a reference image and a compressed version, producing a score between 0 and 1. A score of 1 means the images are identical; 0.95+ is generally considered visually lossless for photographs.

SSIM is the preferred metric for assessing perceptual quality because it models how the human visual system perceives changes. Two images with the same PSNR can look very different if one has blocking artifacts and the other has slight blurring — SSIM captures that distinction.

PSNR #

Peak Signal-to-Noise Ratio (PSNR) measures compression error as a ratio of the maximum possible signal power to the power of the noise introduced by compression, expressed in decibels. Higher is better; values above 40 dB are generally considered high quality.

PSNR is fast to compute and widely reported, but it treats every pixel error equally regardless of whether it falls in a visually sensitive area. Use PSNR as a quick sanity check, not as your primary quality gate.

DSSIM #

DSSIM is a dissimilarity measure derived from SSIM: DSSIM = (1 - SSIM) / 2. It produces a value where 0 means identical and higher values indicate greater perceptual difference.

DSSIM is useful when you want a difference metric that increases with degradation rather than decreasing. Some quality-assurance pipelines prefer it because it reads more intuitively as an error score.

When you read a benchmark that claims “equivalent quality,” it almost always means equivalent SSIM — not the same encoder quality number (e.g., -q 80). Quality parameters are not comparable across formats; a JPEG at quality 80 and a WebP at quality 80 encode differently and may produce very different SSIM scores.

Measuring Your Own Images #

Follow this workflow to benchmark WebP against your existing JPEG and PNG assets before migrating.

Convert and compare file sizes — Encode a representative image at your target quality and compare raw file sizes as the first quick check.
```
# Convert JPEG to WebP and compare sizes
cwebp -q 80 photo.jpg -o photo.webp
ls -lh photo.jpg photo.webp
```
Decode both images to PNG for comparison — To compute a quality metric, you need both images in the same lossless format. Decode the WebP back to PNG alongside a lossless export of the original JPEG.
```
# Export reference PNG from the original JPEG
convert photo.jpg photo-ref.png
# Decode the WebP to PNG
dwebp photo.webp -o photo-webp.png
```
Measure SSIM with ImageMagick — Use ImageMagick’s compare command to compute SSIM between the reference and the WebP-derived PNG. A score close to 1 indicates high perceptual similarity.
```
# Check SSIM — score printed to stderr; /dev/null discards the diff image
compare -metric SSIM photo-ref.png photo-webp.png /dev/null
```

Automate across a batch — Run the comparison across your full sample to get aggregate statistics. Pipe the output to a file for review.

# Batch benchmark: convert, compare, log results
for f in samples/*.jpg; do
  base="${f%.jpg}"
  cwebp -q 80 "$f" -o "${base}.webp"
  dwebp "${base}.webp" -o "${base}-webp.png"
  convert "$f" "${base}-ref.png"
  ssim=$(compare -metric SSIM "${base}-ref.png" "${base}-webp.png" /dev/null 2>&1)
  orig=$(stat -c%s "$f")
  webp=$(stat -c%s "${base}.webp")
  echo "$f | orig=${orig}B webp=${webp}B ssim=${ssim}"
done | tee benchmark-results.txt

Core Web Vitals Impact #

Switching from JPEG or PNG to WebP affects user-facing performance metrics in several ways.

Largest Contentful Paint (LCP) #

LCP measures how long it takes the browser to render the largest visible element on the page — usually a hero image or above-the-fold photograph. A smaller WebP file finishes downloading sooner, moving the LCP timestamp earlier. Studies and real-world deployments consistently show LCP improvements of 10–30% when hero images move from JPEG to WebP at comparable visual quality.

Total Blocking Time and First Input Delay #

Image format changes do not directly affect JavaScript execution metrics. However, reducing image transfer size frees up network bandwidth on congested connections, which can indirectly improve perceived interactivity on image-heavy pages where the main thread is also competing for bandwidth.

Cumulative Layout Shift (CLS) #

Format choice does not cause layout shift. CLS is determined by whether images have explicit width and height attributes in the HTML. Preserve those attributes when you migrate from JPEG or PNG to WebP and your CLS score will remain unchanged.

Measure your Core Web Vitals in the Chrome User Experience Report (CrUX) or via PageSpeed Insights before and after deploying WebP. Field data from real users is more reliable than lab measurements for evaluating LCP changes tied to image delivery.

Benchmark Reference Summary #

Use this quick-reference list when planning a migration or setting expectations with stakeholders:

File size vs JPEG (lossy photos) — 25–34% smaller.
File size vs PNG (lossless graphics) — ~26% smaller.
File size vs GIF (animation) — 40–64% smaller.
SSIM at equivalent file size — Higher than JPEG.
LCP improvement (hero images) — 10–30% faster.
Encoding speed vs JPEG — Slower (method 4).
Browser support — 95%+ globally.

Was this page helpful?