ScreenVault

ScreenVault / Compare images

Compare two images

Find what changed between two screenshots: a shifted button, a new colour, one word of copy. Every differing pixel is highlighted and counted, locally in your browser.

How a pixel diff decides what “changed” means

A diff tool can’t ask whether a change matters; it only compares numbers. For every pixel it measures how far colour B is from colour A, then flags the pixel if that distance is above a tolerance. The distance here is weighted the way eyes work: a change in brightness counts about twice as much as the same change in hue (the YIQ model from NTSC television, which the pixelmatch library also uses).

Below are twelve by six pixels from two renders of the same letter. The grey edge pixels come from anti-aliasing and differ slightly between renders. The blue block is a real change. Drag the tolerance and watch what gets flagged.

A
B
FLAGGED

Real change caught, plus 4 noise pixels from anti-aliasing. A reviewer sees speckles along the letter.

A screenshot comparison workflow for QA

  1. Capture both states at the same viewport and zoom. A one-pixel scrollbar difference shifts everything.
  2. Start at tolerance 0.1. If the count is in the thousands but you see nothing, look at the highlight: speckles along text edges are rendering noise, a solid block is a real change.
  3. Use the yellow box readout to describe the location in the bug report, then download the diff and attach it with both originals.
  4. Save both to your vault under the build number so the baseline is there next time.

Questions

How do I compare two images for differences?

Drop the “before” and “after” images. The diff view paints every pixel that changed in pink over a faded copy of the original and counts them. Switch to the slider or onion-skin view to see the change in context.

Why does it flag pixels I can’t see changing?

Anti-aliasing, font hinting and JPEG compression change edge pixels slightly between renders. Raise the tolerance until only real changes remain; around 0.1 ignores most rendering noise while still catching a changed word or colour.

What if the screenshots are different sizes?

Both are compared on a canvas the size of the larger one, anchored at the top-left, so extra height (a longer page) shows up as changed. For fair results capture both at the same window size and zoom.

Is this a replacement for visual regression testing?

It is the same core check (pixel diff with a perceptual threshold) done by hand. For CI, tools such as Playwright’s toHaveScreenshot, BackstopJS or reg-suit automate it; this page is for quick manual checks and bug reports.

Are the images uploaded?

No. Both images are decoded and compared on a canvas in your browser.

Other screenshot tools