Compare Two Images Online

How to Compare Two Images

Five steps, no software to install and no account required.

1. Add the original as A: drop it on the left slot, click to pick a file, or paste a screenshot with ⌘V or Ctrl+V.
2. Add the changed version as B: same options on the right. Dropping two files at once fills both slots, and the swap button flips them.
3. Read the result: the Difference view paints changed pixels in the highlight color over a faded copy of A, and the stats show how many pixels changed, what share of the image that is, and how many separate regions were found. Identical images get a clear “Images are identical” message.
4. Inspect the changes: switch to Slider to wipe between A and B, Side by side to scroll both together, or Overlay to fade B over A. Zoom from 50 to 400%, and use the region arrows to jump from one change to the next.
5. Tune and export: adjust the threshold, the anti-aliasing option and the highlight color until only the changes you care about remain, then download the diff as a PNG (with region boxes) or copy it to the clipboard.

What the Threshold and Anti-Aliasing Settings Do

Threshold

The image difference finder does not compare raw RGB numbers. For every pixel it measures the perceived color difference in the YIQ color space, a model that weights brightness more than hue, the way your eyes do. The result is scaled so 0 means identical and 1 is the largest possible difference (pure red against cyan); pure black against pure white sits at about 0.97. Any pixel above the threshold is flagged as changed.

• 0: flags every pixel that differs at all, including one-level rounding differences nobody can see.
• 0.1 (default): skips invisible shifts and light compression noise and catches most visible changes. Very light shade changes, such as a background one gray step darker, can fall below it, so lower the threshold to 0.05 or less when you check subtle color tokens.
• 0.2 to 0.3: a good range for JPGs, rescaled images and screenshots from different machines.

Playwright’s toHaveScreenshot assertion uses a threshold on the same 0 to 1 YIQ scale with a default of 0.2. Set the threshold here to 0.2, with Ignore anti-aliasing on, to preview what a default test run would flag before you change its settings.

Ignore anti-aliasing

Text and diagonal edges are drawn with in-between shades so they look smooth. Different browsers, graphics cards, font renderers and scaling settings produce slightly different edge pixels, so the same text rendered twice can differ along every letter. With this option on, a pixel that sits between a darker and a brighter neighbor on the border of two flat areas is treated as an edge artifact: it is not counted and is painted yellow so you can still see it. Turn the option off when the edges are exactly what you are checking, such as a redrawn icon or a change in font weight.

Screenshot Comparison for Visual Regression Testing and QA

A visual diff answers one question quickly: what changed on screen? That makes it useful well beyond spotting the difference between two photos.

• Before and after a deploy: capture the same page on production and on staging, or before and after a merge, and compare them. Anything highlighted outside the area you meant to change deserves a second look.
• Catching unintended UI changes: a CSS edit for one component that shifts padding somewhere else, a font that silently falls back, a missing icon, or a design token that changed a shade of gray across the whole app. For shade changes this small, lower the threshold to 0.05 or less.
• Verifying a bug fix: compare the screenshot from the bug report against the fixed build to confirm the fix and check that nothing around it moved.
• Pairing with automated screenshot tests: when a Playwright visual test fails, it writes expected, actual and diff images to the test results folder. Drop the expected and actual files here to inspect them with the slider and zoom, and try different thresholds before you touch the test config.
• Better bug reports: attach the downloaded diff next to the before and after screenshots, so the developer sees the regression without hunting for it.

Why Images That Look Identical Still Show Differences

A pixel-level image comparison sees changes your eyes skip. The usual suspects:

• JPEG re-compression: every save as JPG re-encodes the image in 8×8 blocks, so pixels drift by a few levels each time, most visibly around text and sharp edges.
• Color profiles: an image tagged Display P3 and one tagged sRGB, or one with no profile at all, are converted differently when they are drawn, so identical source pixels can come out slightly different.
• Font anti-aliasing and sub-pixel rendering: Windows ClearType adds colored fringes to text, macOS smooths in grayscale, and browsers rasterize fonts in their own way. The same page on two machines rarely matches along the letters.
• Device pixel ratio: a 2x display produces screenshots twice as wide and tall as a 1x display, and fractional scaling such as 125% or 150% on Windows changes the size again. Scaling one image to match the other always resamples it.
• Things that move on their own: clocks, timestamps, relative dates like “3 minutes ago”, a blinking text cursor, the mouse pointer, hover states, carousels, ads, animations caught mid-transition and images that had not finished loading.