About

Pixel-level image comparison is a non-trivial problem. Human eyes perceive color differences non-linearly, so a simple RGB subtraction produces misleading results. This tool converts each pixel pair from sRGB to the CIELAB color space and computes ΔE (CIE76), the Euclidean distance in perceptual color space. A ΔE below 2.0 is generally imperceptible. Above 10.0, colors are perceived as entirely different. The tool also calculates SSIM (Structural Similarity Index), which evaluates luminance, contrast, and structure independently. SSIM ranges from 0 (no similarity) to 1 (identical). Relying on visual inspection alone risks missing sub-pixel shifts, compression artifacts, or color profile mismatches that silently degrade asset quality across production pipelines.

Both images are resampled to a common resolution before comparison. This introduces interpolation error for mismatched dimensions. For accurate results, compare images of identical resolution. The difference map uses a false-color heat scale: blue indicates no change, red indicates maximum deviation. PSNR (Peak Signal-to-Noise Ratio) is reported in dB. Values above 40 dB typically indicate visually lossless quality. Note: this tool operates entirely in your browser. No images are uploaded to any server.

Formulas

The perceptual color difference uses the CIELAB color space. First, sRGB values are linearized and transformed to CIE XYZ, then to CIELAB coordinates (L*, a*, b*).

ΔE = √(L₁ − L₂)² + (a₁ − a₂)² + (b₁ − b₂)²

Peak Signal-to-Noise Ratio measures overall fidelity against the maximum possible pixel value.

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

Where MSE = 1N N∑i=1 (x_i − y_i)² is the Mean Squared Error across all pixel channels.

The Structural Similarity Index (SSIM) evaluates three components per window.

SSIM(x, y) = (2μ_xμ_y + C₁)(2σ_xy + C₂)(μ_x² + μ_y² + C₁)(σ_x² + σ_y² + C₂)

Where μ denotes mean, σ² variance, σ_xy covariance. Constants C₁ = (0.01 ⋅ 255)² and C₂ = (0.03 ⋅ 255)² stabilize division near zero.

Reference Data

Metric	Range	Interpretation	Use Case
ΔE (CIE76)	0 - 100+	< 1: imperceptible; 1 - 2: close observation; > 10: different color	Print proofing, brand color compliance
SSIM	0 - 1	1.0 = identical; > 0.95: excellent; < 0.5: poor	Compression quality assessment
PSNR	0 - ∞ dB	> 40: excellent; 30 - 40: good; < 20: poor	Codec benchmarking
Mean Absolute Error	0 - 255	0 = identical pixel values	Artifact detection
Max Channel Diff	0 - 255	Peak deviation in any single RGB channel	Clipping detection
Changed Pixels %	0 - 100%	Fraction of pixels exceeding threshold	Regression testing
Histogram Correlation	−1 - 1	1 = identical distribution; 0 = uncorrelated	Exposure/color shift detection
JPEG Quality (est.)	1 - 100	Estimated from quantization tables if available	Compression level comparison
File Size Ratio	0+	Image B size ÷ Image A size	Compression efficiency
Resolution Match	Yes / No	Whether both images share identical dimensions	Pipeline validation
Luminance Mean Diff	0 - 255	Average brightness difference (grayscale)	Exposure comparison
Color Gamut Coverage	0 - 100%	% of unique colors in A present in B	Posterization detection

Frequently Asked Questions

JPEG is a lossy format. Even re-saving the same image at quality 100 re-quantizes DCT coefficients, introducing sub-pixel differences. These are typically below ΔE 2.0 and imperceptible, but mathematically non-zero. Different software also uses different chroma subsampling (4:2:0 vs 4:4:4) and Huffman tables, producing bitwise-different files from identical source pixels.

When images differ in dimensions, both are resampled to the larger resolution using bilinear interpolation on a canvas element. This introduces interpolation artifacts that appear as false differences, especially along high-contrast edges. For reliable metrics, always compare images at their native, identical resolution. A resolution mismatch warning is displayed in the results panel.

PSNR is purely mathematical. It treats a 1-pixel shift of an edge identically to random noise, despite the shift being far less perceptible. SSIM accounts for structural patterns, luminance, and contrast, correlating better with human visual perception. An image with PSNR of 30 dB but SSIM of 0.98 is likely perceptually excellent despite mediocre PSNR. Use SSIM for quality assessment and PSNR for codec benchmarking where standardized metrics are required.

It can detect the pixel-level artifacts caused by LSB (Least Significant Bit) steganography. These appear as scattered single-channel differences of magnitude 1 across large pixel regions in the difference map. However, the tool does not decode or extract hidden messages. A suspiciously uniform low-magnitude difference pattern across the entire image warrants further analysis with dedicated steganalysis tools.

JPEG uses 8×8 pixel DCT blocks. In smooth gradients, quantization rounds similar values differently per block, creating block boundary artifacts. These are amplified in the difference map because the false-color scale is normalized to the maximum deviation found. If the overall difference is small, even tiny block artifacts get mapped to warm colors. Check the absolute Mean Error value. If below 2.0, the visual noise in the heatmap is misleading.

The browser's canvas API applies the embedded ICC color profile during decoding, converting to sRGB. If Image A has an Adobe RGB profile and Image B has sRGB, their decoded pixel values will differ even if the source data is identical. This is correct behavior. The tool compares what the user actually sees on screen (sRGB-decoded pixels). EXIF orientation tags are respected by modern browsers during image loading.