About

Pixel-level image comparison detects changes invisible to the human eye. A single altered pixel in a 1920×1080 PNG represents just 0.00005% of the frame, yet it can indicate a rendering regression, an unauthorized asset modification, or a lossy re-encode masquerading as lossless. This tool computes the Euclidean distance √∑(c₁ − c₂)² across RGB channels for every pixel pair and maps results to a visual heatmap. It assumes both images share identical dimensions. Results are approximate when comparing images with different alpha pre-multiplication states.

Five comparison modes cover different inspection needs: slider overlay for spatial orientation, difference heatmap for magnitude analysis, side-by-side for quick visual scan, blend difference for artistic review, and an opacity fade for subtle shift detection. The tolerance parameter t filters per-channel noise below a threshold, useful when comparing JPEG-recompressed assets against PNG originals. Pro tip: export your reference render at the exact target resolution to avoid dimension-mismatch rejection.

Formulas

The core comparison metric is the Euclidean distance in RGB color space between corresponding pixels of images A and B:

d_i = √(r_A − r_B)² + (g_A − g_B)² + (b_A − b_B)²

where r, g, b are the red, green, and blue channel values (0 - 255) for pixel i. A pixel is marked as changed when d_i > t, where t is the user-defined tolerance threshold.

The Mean Squared Error across all N pixels:

MSE = 1N N∑i=1 d_i²

Peak Signal-to-Noise Ratio quantifies reconstruction fidelity:

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

where d_i = per-pixel Euclidean distance, N = total pixel count (W × H), t = tolerance threshold, MSE = mean squared error, and PSNR is measured in dB. A PSNR above 40 dB indicates near-imperceptible difference. Infinite PSNR means identical images.

Reference Data

Metric	Formula / Method	Use Case
Pixel Delta	√(Δr)² + (Δg)² + (Δb)²	Per-pixel color distance
Max Delta	max(d_i) for all i	Worst-case deviation
Mean Delta	1N ⋅ ∑d_i	Overall drift severity
Changed Pixels	Count where d_i > t	Affected area size
Change %	ChangedN × 100	Summary statistic
PSNR	10 ⋅ log₁₀(255²MSE)	Signal quality benchmark
MSE	1N ⋅ ∑d_i²	Error magnitude
SSIM Range	0 (no match) - 1 (identical)	Perceptual similarity
PNG Bit Depth	8 or 16 bits/channel	Precision ceiling
Color Space	sRGB (standard for web PNGs)	Comparison validity
Tolerance 0	Exact match only	Lossless verification
Tolerance 5	Filters JPEG artifacts	Cross-format comparison
Tolerance 10	Filters minor color shifts	Monitor calibration delta
Tolerance 25	Filters moderate changes	Layout regression tests
Tolerance 50	Only major changes shown	Structural diff only
Max Euclidean Delta	√3 × 255² ≈ 441.67	Normalization ceiling
Heatmap: Green	d = 0	Identical pixel
Heatmap: Yellow	d ≤ 50	Minor difference
Heatmap: Orange	d ≤ 150	Moderate difference
Heatmap: Red	d > 150	Major difference

Frequently Asked Questions

Pixel-by-pixel comparison requires a 1:1 coordinate mapping. If Image A is 800×600 and Image B is 1024×768, pixel (400, 300) in A has no semantically equivalent counterpart in B. Resizing one image to match introduces interpolation artifacts that would register as false differences. This tool enforces dimension parity to ensure every reported delta reflects a genuine change, not a resampling artifact.

For lossless PNG-to-PNG regression tests, use tolerance 0 for exact matching. If your CI pipeline re-encodes screenshots through a JPEG step, set tolerance to 3 - 5 to filter compression noise. For cross-browser rendering comparisons where sub-pixel antialiasing varies, 10 - 15 is practical. Values above 25 risk masking legitimate layout regressions.

The heatmap maps the Euclidean distance d to a color gradient. Identical pixels (d = 0) render transparent over a dark background. Low deltas (d ≤ 50) appear yellow, moderate deltas (d ≤ 150) appear orange, and high deltas (d > 150) appear red. The maximum possible delta is √3 × 255² ≈ 441.67 (black vs white).

Yes. The comparison uses all four RGBA channels. However, the primary Euclidean distance metric uses only RGB for the heatmap visualization, because alpha differences are perceptually ambiguous (a transparent red pixel and a transparent blue pixel look identical if fully transparent). Alpha channel deltas are reported separately in the statistics panel as a distinct metric.

PSNR is defined as 10 ⋅ log₁₀(255² ÷ MSE). When MSE equals zero (identical images), the division yields infinity. This tool displays "∞ dB" in that case. Practically, PSNR above 50 dB means differences are invisible to the human eye under normal viewing conditions.

The Canvas API converts all images to sRGB upon drawing. If your source PNG embeds an Adobe RGB or Display P3 profile, the browser applies a gamut mapping before pixel data reaches this tool. The comparison is therefore performed in sRGB space regardless of source profiles. For profile-accurate comparison, convert both images to the same color space externally before uploading.