About

Lossy WebP compression introduces quantization artifacts that are invisible at a glance but measurable at the pixel level. A 1dB drop in PSNR can correspond to visible banding in smooth gradients. This tool computes the actual per-pixel difference map between two images, calculates PSNR and a simplified SSIM index, and renders per-channel histograms so you can quantify degradation rather than guess at it. It works entirely in your browser. No uploads, no server processing.

Typical use: compare a lossless source against its WebP-encoded output at various quality settings (q = 50, 75, 90) to find the lowest file size that keeps PSNR above 40dB and SSIM above 0.98. The tool also accepts PNG and JPEG for cross-format comparison. Note: SSIM here uses an 8×8 block approximation rather than a full Gaussian-weighted window, so values may differ slightly from reference implementations like the original Wang et al. (2004) algorithm.

Formulas

Peak Signal-to-Noise Ratio measures the ratio between the maximum possible pixel value and the distortion (noise) introduced by compression:

PSNR = 10 ⋅ log₁₀ (MAX²MSE)

where MAX = 255 for 8-bit images. The Mean Squared Error is computed as:

MSE = 1N N∑i=1 (A_i − B_i)²

where N is the total number of pixel-channel samples and A_i, B_i are individual channel values in images A and B.

The simplified Structural Similarity Index (per block) is:

SSIM = (2μ_Aμ_B + C₁)(2σ_AB + C₂)(μ_A² + μ_B² + C₁)(σ_A² + σ_B² + C₂)

where μ is the block mean, σ² the variance, σ_AB the covariance, C₁ = (0.01 ⋅ 255)² and C₂ = (0.03 ⋅ 255)² are stabilization constants. The final SSIM is the mean across all blocks.

Reference Data

Metric	Range	Excellent	Good	Poor	Notes
PSNR	0 - ∞ dB	> 40	30 - 40	< 30	Identical images → ∞
SSIM	0 - 1	> 0.98	0.90 - 0.98	< 0.90	Perceptual quality measure
MSE	0 - 65025	< 10	10 - 100	> 100	Mean Squared Error per pixel
WebP Lossy q=100	-	Near-lossless, PSNR typically > 45dB			Largest file size
WebP Lossy q=80	-	PSNR ≈ 36 - 42dB			Common web default
WebP Lossy q=50	-	PSNR ≈ 30 - 36dB			Visible artifacts in gradients
WebP Lossy q=20	-	PSNR ≈ 25 - 30dB			Heavy blocking, color shift
WebP Lossless	-	PSNR = ∞, SSIM = 1.0			Bit-identical decode
JPEG q=80	-	PSNR ≈ 34 - 38dB			WebP typically 25 - 34% smaller
PNG (lossless)	-	Reference baseline			No quality loss, large file
Pixel Diff Amplification	1× - 20×	Higher reveals subtle changes			Default 10× in this tool
Color Channels	R, G, B, A	Each compared independently			Alpha channel included
Histogram Bins	256	Full 8-bit range			Per channel
Max Image Size (this tool)	-	4096×4096px			Larger images downscaled

Frequently Asked Questions

When MSE equals zero (every pixel in both images is identical), the logarithm term diverges to infinity. This is correct behavior - it means there is literally no measurable difference. This commonly occurs when comparing a WebP lossless file against itself, or when two separately encoded lossless WebP files of the same source produce bit-identical pixel output.

Yes. The tool decodes any browser-supported image format (WebP, PNG, JPEG, GIF, AVIF, BMP) into raw RGBA pixel data via the Canvas API. The comparison operates on decoded pixels, not compressed bytes. This means you can load your original PNG master as Image A and the WebP export as Image B to measure exactly what compression cost you.

Per-pixel differences between high-quality images are often in the range of 1-5 out of 255, which renders nearly black on screen. The amplification multiplier (default 10×) scales each difference value before mapping it to the heatmap color, making subtle artifacts visible. A factor of 20× will reveal even single-bit quantization noise. The actual PSNR and SSIM calculations are unaffected by this display setting.

SSIM is a structural metric that weights luminance and contrast patterns over raw pixel error. A region with shifted hue but preserved edges scores well on SSIM but produces a colored patch in the pixel diff. Conversely, Gaussian noise lowers SSIM significantly even when individual pixel errors are small. Always check both metrics together - PSNR for raw signal fidelity, SSIM for perceptual quality.

The tool requires both images to have identical pixel dimensions for a valid comparison. If dimensions differ, it will report the mismatch and refuse to compute metrics, since resizing either image would introduce interpolation artifacts that corrupt the measurement. Crop or resize your images to matching dimensions before comparison.

PSNR will match reference implementations exactly - it is a straightforward arithmetic formula. The SSIM implementation here uses non-overlapping 8×8 blocks with uniform weighting rather than overlapping 11×11 Gaussian-weighted windows as specified in the original Wang et al. paper. Expect values within ±0.02 of reference tools. For publication-grade measurements, use the full Gaussian SSIM in MATLAB or libvmaf.