Screenshot Comparison

Screenshot comparison is the process of checking two screenshots of the same screen, page or window to find differences. The comparison can be visual, with the images side by side, overlaid with a slider, or blended at partial opacity. It can also be computed, with software producing a diff image that highlights changed pixels and a count or percentage of pixels that differ.

Reliable comparison needs matching inputs. Both images should have the same pixel dimensions, scale factor and crop. A change in window size, Retina scale or scroll position makes almost every pixel differ even when the content is the same.

Manual vs automated comparison

Manual comparison suits a few images and judgment calls, such as whether a redesign reads better. Automated comparison suits many images and repeated runs: a script compares each new capture with a stored baseline and reports only the ones that changed beyond a threshold.

Where screenshot comparison is used

• Visual regression testing after code changes.
• Checking a competitor's or your own page for content changes.
• Before and after images for design reviews and release notes.
• Confirming that a document or dashboard matches an earlier version.

How visual diffing works

1. Align the two images at the same size.
2. Compare each pixel's color values.
3. Ignore differences below a tolerance, which absorbs anti-aliasing noise.
4. Mark changed pixels in a highlight color and report the total.

Perceptual methods such as SSIM compare structure and contrast instead of exact values, which reduces false alarms from tiny rendering shifts.

Common mistakes with screenshot comparison

• Comparing images of different sizes or scale factors.
• Leaving clocks, ads, carousels or animations in the frame.
• Taking captures with different fonts installed or a different browser version.
• Setting the tolerance so high that real changes pass.

Taking the same screenshots again and again?

Temposhot Website Capture keeps per-URL Device, Area and Wait settings, so repeated runs produce comparable images. For screen regions, a saved Custom Area keeps the same rectangle. See capture options.

Common questions

What is a good diff threshold?

It depends on the page. Start low, review false alarms, and mask dynamic regions instead of raising the threshold.

Can I compare two screenshots without installing anything?

Yes. The Compare Images highlights differences in the browser.

Sources

• Playwright visual comparisons
• Structural similarity index on Wikipedia

Related resources

• Compare images: diff two images locally.
• Website Capture quick start: capture repeatable page sets.
• Capture sources: saved custom areas.