{{ summaryTitle }}
{{ summaryValue }}

{{ summaryLine }}

Tolerance{{ tolerance }} / 255 Alpha{{ alphaModeShortLabel }} Canvas{{ summaryDimensions }}
Choose one PNG, JPEG, or WebP baseline and one equal-dimension candidate, up to 12 MB each.
Baseline image
The expected or earlier image.
{{ baselineMeta }}
{{ files.baseline ? files.baseline.name : 'Drop baseline here' }}
{{ files.baseline ? 'Ready for local decoding' : 'PNG, JPEG, or WebP' }}
Candidate image
The revised or observed image.
{{ candidateMeta }}
{{ files.candidate ? files.candidate.name : 'Drop candidate here' }}
{{ files.candidate ? 'Ready for local decoding' : 'PNG, JPEG, or WebP' }}
The sample is generated locally; each source accepts one image.

Ignored {{ ignoredFileCount }} extra {{ ignoredFileCount === 1 ? 'file' : 'files' }}. Each source accepts one image.

{{ tolerance }} / 255
Use 0 for exact comparison. Higher values ignore small channel differences such as compression noise.
Choose whether transparency data is evidence or only the white-composited appearance matters.

{{ workflowMessage }}

Off is neutral. Turn this on to label chart segments in the exported visual.
{{ chart_segment_labels ? 'Percentage labels on' : 'Percentage labels off' }}
Orange-red pixels exceed tolerance; pale grayscale pixels retain baseline context. {{ outputPolicyLine }}

The chart renderer is unavailable. The exact counts remain available in the comparison ledger.

MeasureValueReview meaningCopy
{{ row.label }}{{ row.value }}{{ row.note }}
Text Diff Comparator Compare original and revised text locally through unified hunks and line alignment, with audited ignore rules and clear change counts.
JSON Diff Comparator Compare JSON as parsed structures with configurable array matching and ignored paths, then review exact changes through path and patch evidence.
XML Diff Comparator Compare XML as parsed structure with keyed or positional node matching, namespace and whitespace policies, and exact path-level change evidence.
Image Cropper Crop one image locally with exact aspect and pixel controls, then review upscaling and transparency along with quality or file-budget risks.

A visual review can miss a one-pixel shift, a faint color change, or altered transparency. Pixel comparison makes those differences measurable by placing two images on the same coordinate grid and checking corresponding color channels. It is useful for screenshot regression checks, revised graphics, exported charts, and any workflow where “looks the same” is not enough evidence.

The comparison only has a clear meaning when both images represent the same canvas. Different dimensions, crops, alignment, or scaling create differences everywhere even when the subject is unchanged. Registration and resampling are separate image-processing tasks; a direct comparator should not quietly perform them.

Baseline
The expected, approved, or earlier image.
Candidate
The revised or observed image being checked.
Tolerance
The largest per-channel difference that still counts as unchanged.
Alpha
The transparency channel, which can hide RGB values that are not visible against a background.

A tolerance of zero is exact after browser decoding. A higher tolerance can suppress small changes caused by lossy compression or color conversion, but it can also hide a real low-contrast edit. The right value depends on why the images are being compared, so keep it fixed when comparing several candidates.

A pixel match proves equality only under the selected decoding, alpha, and tolerance rules. It does not prove that two source files have the same metadata, compression settings, color profile, or byte content.

How to Use This Tool:

Choose images that should share the same pixel width and height. Start with exact comparison, then relax tolerance only when known encoding noise is irrelevant.

  1. Choose a PNG, JPEG, or WebP Baseline image and Candidate image, up to 12 MB each.
  2. Set Per-channel tolerance from 0 through 64. At 0, any compared-channel change marks the pixel; at higher values, only a difference greater than the selected value does.
  3. Choose Compare raw RGBA channels when hidden RGB or transparency changes matter. Choose Composite both on white when only appearance against opaque white matters.
  4. Select Compare images. If the decoded dimensions differ, use equal-size sources rather than expecting automatic scaling or alignment.
  5. Review the difference image with the changed-pixel count, maximum channel delta, mean channel delta, and change bounds before deciding whether the candidate is acceptable.

Interpreting Results:

Orange-red pixels exceed tolerance. Pale grayscale pixels preserve baseline context but count as unchanged. Changed pixels tells you the affected area, while Maximum channel delta shows the strongest single-channel change on the 0 to 255 scale.

  • A zero changed-pixel count means every tested pixel is at or below tolerance; it does not compare metadata or compressed bytes.
  • A small changed percentage can still matter when the marked region contains a price, label, border, or control state.
  • Difference bounds gives the smallest rectangle enclosing all changed pixels. It localizes change but does not explain its cause.
  • Mean channel delta averages all tested channels, including unchanged regions, so a localized severe edit can coexist with a low mean.

Verify important changes in the original images. The highlight view is evidence of coordinate-level difference, not a judgment about design quality or semantic importance.

Technical Details:

Both files are decoded to equal-size, 8-bit sRGB pixel arrays. No cropping, resampling, or registration occurs. Each coordinate is tested independently using the largest absolute difference among the compared channels.

Formula Core

For pixel p, the per-pixel delta is the maximum channel difference. Raw mode compares red, green, blue, and alpha; white-composite mode compares three rendered color channels.

dp = maxc∈C | bp,c - qp,c | pixel changed ⇔ dp > T Changed percent = Changed pixelsW×H × 100

b and q are baseline and candidate channel values, C is the selected channel set, T is tolerance, and W and H are image dimensions. Equality belongs to the unchanged side: a delta exactly equal to tolerance does not count as changed.

White compositing converts each color channel before comparison:

Cwhite = round ( C×α+255×(255-α) 255 )

This makes fully transparent black and fully transparent white equivalent on a white background, even though raw RGBA comparison detects their hidden RGB difference.

Rule Core

Rule Exact behavior
Accepted sources PNG, JPEG, or WebP with a matching file signature, at most 12 MB each.
Canvas limit Equal dimensions, at most 4,096 pixels per side and 1.5 million pixels total.
Changed boundary Largest tested channel delta > tolerance.
Difference bounds Minimum x and y plus inclusive width and height around changed pixels; all values are zero when none change.

Mean channel delta is the sum of every absolute tested-channel difference divided by pixel count times channel count. Raw mode divides by four channels; white-composite mode divides by three.

Privacy Notes:

The selected images are decoded and compared in the browser; they are not uploaded for processing. Keep sensitive originals under your normal device and browser security controls, and close the tab when the comparison is finished.

References: