How SiteReceipt compares screenshots

A screenshot comparison answers a narrow question: where do these two rendered image files differ beyond the selected tolerance? It does not inspect HTML, CSS, component state, network behavior, or the intention behind a change. SiteReceipt keeps that distinction visible because a precise-looking diff can still come from an unfair capture pair.

What SiteReceipt compares

The inputs are two PNG, JPEG, or WebP images chosen on your device: a baseline before image and a current after image. Each file may be up to 15 MB and 20 megapixels. The browser decodes each file into pixel data, then SiteReceipt evaluates every corresponding pixel in a shared comparison area.

Matching image dimensions produce the most meaningful result. If width or height differs, the pair describes different crops or layouts unless you have a specific reason for the mismatch. SiteReceipt shows the selected-file previews but pauses automatic comparison and report export until the dimensions match. It cannot infer which pixels should correspond after a responsive reflow, crop, or shifted page section.

The browser-side comparison pipeline

1. File selection and decoding

When you choose an image, the browser reads that local file for the active page session and decodes it. SiteReceipt does not need to send the image to an application server to compare it. If a file cannot be decoded as a supported image, the comparison cannot proceed.

2. Comparison geometry

Both decoded images are represented on the same internal pixel grid. A position has a fair counterpart only when it refers to the same visual location in both captures. SiteReceipt does not use feature recognition, optical flow, or AI to relocate a button that moved between screenshots. Movement therefore appears as differences at the old and new positions.

3. Full pixel scan and color difference

SiteReceipt scans every pixel position on the normalized comparison surface. At each position, it adds the absolute red, green, and blue channel differences plus half the alpha-channel difference. The result is evaluated against the threshold set by the sensitivity control.

This is a deterministic operation for the same decoded files and setting. SiteReceipt does not ask a model whether a change is important. The same inputs and sensitivity produce the same comparison classification in the same implementation.

4. Region grouping and visualization

Changed pixels are counted in grid cells. A cell becomes active when its share of changed pixels exceeds the sensitivity-dependent threshold. Touching active cells are grouped into regions, very small groups are removed, and up to eight largest regions are shown in the spotlight view. Use the before and after views to understand what those regions represent. A spotlight is evidence of image difference, not a defect label, severity score, or approval recommendation.

What the sensitivity control means

Sensitivity changes the tolerance for color difference. At a more sensitive setting, subtle variations such as anti-aliased text edges, soft shadows, or minor color adjustments are more likely to appear. At a less sensitive setting, the view emphasizes larger color differences.

The setting does not improve image alignment and does not identify which difference is intentional. It also has a tradeoff: suppressing weak font halos can suppress a faint focus style or one-pixel divider. Use it as an inspection control, then record the setting when the result supports a report.

How to interpret the output

Begin with geometry. If stable landmarks do not align, stop and review the capture. If geometry is sound, inspect the first major changed region from the top. One new line of copy can move everything below it and create a large secondary difference.

Classify visible regions using context outside the algorithm:

• Expected: the change matches an approved requirement, mockup, or content request.
• Unexpected: the change is outside the intended scope and can be reproduced in the product.
• Environmental: the difference comes from capture timing, fonts, data, scaling, or another uncontrolled condition.
• Inconclusive: the available images do not contain enough context to assign a cause.

A changed-pixel summary should never be read as a quality score. A single missing decimal point can matter more than a complete, approved hero redesign.

Improve repeatability before comparing

The algorithm can be deterministic while the page is not. For a stronger comparison, match the following inputs:

• browser family and version;
• operating system, zoom, and device pixel ratio;
• CSS viewport and scrollbar behavior;
• route, locale, theme, user state, data, and feature flags;
• font, icon, and image loading state;
• scroll position, focus, hover, open menus, and consent state;
• animation frame, current time, and randomized or live content;
• screenshot method, crop, file dimensions, and encoding.

Read how to reduce visual diff noisefor diagnostic patterns and a practical normalization order.

Known limitations

No semantic understanding

SiteReceipt does not know that a region is a checkout total, warning, or decorative image. It cannot rank business impact or verify copy meaning.

No automatic geometric registration

The current method expects corresponding content to occupy corresponding positions. It does not rotate, warp, or intelligently realign page elements. A crop or reflow can create widespread differences.

Rendered-state coverage only

A screenshot contains one moment. Hidden menus, hover states, keyboard focus, later steps, loading failures, responsive sizes, and off-screen behavior require separate captures or other tests.

Dynamic media may be unsuitable

Video, canvas animation, maps, live dashboards, ads, and randomized feeds may not produce a stable pixel baseline. A documented exclusion can be more honest than a heavily filtered diff.

Not an accessibility or functional test

A visually identical page can have a missing accessible name, broken tab order, invalid form submission, or incorrect analytics. Use dedicated checks for those requirements.

Local image processing

Selected screenshots are decoded and compared in the browser. SiteReceipt does not upload those image contents to its own server for the comparison. The files remain available to the active page only as needed to display and process the result. Closing or reloading the page clears the active comparison unless your browser retains page state independently.

Downloaded reports are saved through your browser and become files under your control. Screenshots can contain personal, confidential, or unreleased information, so use test data and redact unrelated details before sharing. See the privacy notice for hosting data and the planned approach to advertising disclosures.

Frequently asked questions