Screenshot Comparison Tool for Visual QA
Compare the same page before and after a release to inspect layout shifts and unexpected UI changes.
A repeatable screenshot review
1
Capture a stable baseline
Use the same route, viewport, and test data. Wait for fonts and images to finish loading before saving the approved screenshot.
2
Compare the release candidate
Load the baseline and the new capture. Start with side-by-side or slider views to locate layout shifts and changed elements.
3
Review desktop and mobile changes
Use pixel diff, highlight, or heatmap to inspect changed regions, then confirm which differences match the intended release.
Include the UI states that matter
A screenshot comparison is useful when both captures show the same user state. For a page change, compare the relevant empty, populated, validation, or completed state instead of unrelated screens.
Prioritize states where spacing, hierarchy, or the visibility of a primary action affects the task.
Pair visual review with functional checks
A screenshot diff highlights rendered pixels. It cannot confirm that links, buttons, keyboard access, or validation behavior work as intended.
Use screenshots to review appearance and context, then verify interactive behavior with functional and accessibility checks.
Related guides
Image comparison FAQ
Which image formats are supported?
The page supports PNG, JPG, GIF, WEBP, and SVG uploads.
What comparison modes are available?
Six modes: side-by-side, stacked, slider overlay, pixel diff, highlight, and heatmap. Use the overlay or slider for quick checks, and pixel diff or highlight for exact changes.
What do sensitivity and channels do?
The sensitivity slider controls how strictly pixels are compared, ignore anti-aliasing skips fringing, and the channel selector lets you compare a single color channel (R, G, B) or luminance.
Are my images uploaded to a server?
No. All comparison and image processing happens locally in your browser.