Free Image Compare and Screenshot Diff Checker Online

What is an image compare tool?

An image compare tool is a free online utility that takes two images, checks them pixel by pixel, and highlights every pixel whose color differs. This image diff checker reads pixel data through the browser Canvas API, reports the mismatch as a percentage, and works on screenshots, design exports, and photos in common formats.

TestMu AI built this image compare tool for testers and developers who need a quick screenshot diff without installing software. Pixels are read with the getImageData() method documented by MDN, which returns RGBA values with 8 bits per component. All processing happens in your browser. No data is uploaded.

To compare words instead of pixels, use Text Compare for plain text or Code Compare for source files.

How does pixel by pixel image comparison work?

Pixel by pixel image comparison walks through both images at the same coordinates and scores how far apart each pair of colors is. This tool runs five steps on every comparison:

• Align the images: Both images are drawn onto canvases of one shared size, either aligned at the top left corner or with the changed image scaled to fit the original.
• Convert the colors: Each RGB pixel is converted to YIQ, the color space of the analog NTSC television system, which separates brightness (Y) from two color channels (I and Q).
• Score the difference: The tool computes 0.5053 x Y difference squared + 0.299 x I difference squared + 0.1957 x Q difference squared, so a change in brightness weighs more than an equal change in either color channel.
• Apply the tolerance: The largest score this formula can produce is 35,215. A pixel counts as different when its score is above 35,215 multiplied by the tolerance squared, which is 352.15 at the default 10%.
• Filter anti-aliasing: A flagged pixel is ignored when it sits on a brightness slope between a darker and a brighter neighbor beside a flat area in both images, an approach based on the 2009 paper Anti-aliased Pixel and Intensity Slope Detector by Vytautas Vyšniauskas.

A worked example at 10% tolerance: pure white (255, 255, 255) against light gray (229, 229, 229) differs by 26 brightness levels, and 0.5053 x 26 x 26 = 341.6, which is under 352.15, so the pixels match. Gray (228, 228, 228) differs by 27 levels and scores 368.4, so it is flagged.

How do you compare two images or screenshots online?

Comparing two images takes six steps and needs no signup or download:

• Add the original image: Press Upload in the Original image box, drop a file onto it, or paste a screenshot with Ctrl+V (Cmd+V on a Mac).
• Add the changed image: Do the same in the Changed image box. A pasted screenshot fills the first empty box. Press Load sample to try the tool with a built in pair of screenshots.
• Pick a view: Use the Pixel diff tab to see changed pixels in the highlight color, or switch to Slider, Side by side, or Fade to inspect the two images directly. Fit, 100%, and 200% set the zoom.
• Tune the comparison: Move the Color tolerance slider or press Exact, Default, or Loose, switch Ignore anti-aliasing on or off, choose Align top left or Scale to fit under Size mismatch, and pick a Highlight color. The diff updates automatically.
• Read the result: Check the mismatch percentage, the different pixel count, and the changed region. Set Allowed mismatch to get a PASS or FAIL badge.
• Export the diff: Press Download diff PNG to save the highlighted image, or Copy report to copy the numbers as text for a bug ticket.

The capture above shows the built in sample: two 800 by 500 pixel checkout screenshots in which the button moved and changed color, the shipping line and total changed, and a badge was added. The pixel diff paints only those areas in red.

What do the image diff settings change?

The image diff has five settings, and each one changes which pixels are counted or how the result is judged:

Which image comparison view should you use?

The tool has four views of the same pair of images. Start with Pixel diff to find where the changes are, then switch views to judge what changed:

What are the use cases of a screenshot diff checker?

A screenshot diff checker answers one question quickly: did anything on this screen change. Common uses in QA and development work:

• Visual regression checks: Compare a baseline screenshot with one taken after a deploy to catch unintended UI changes, the core idea behind visual regression testing.
• Cross browser review: Capture the same page in two browsers with automated screenshot testing and diff the results to find rendering differences.
• Design QA: Compare a design export with a screenshot of the build. Match dimensions first with the Image Resizer, since a screen with a ratio of 2 in the Device Pixel Ratio Checker captures screenshots at twice the CSS size.
• Compression checks: Diff a PNG against its JPG or WebP export to see where compression changed the image.
• Bug reports: Attach the downloaded diff PNG and the copied report to a ticket so the reviewer sees the exact changed region.

This tool compares one pair of images at a time. To run the same baseline comparison on every build, TestMu AI SmartUI automates visual testing across 3000+ browsers and 10,000+ real devices on the real device cloud.

Frequently Asked Questions (FAQs)

Can you compare two images that are different sizes?

Yes, you can compare two images of different sizes. The default mode aligns both images at the top left corner and counts every pixel that exists in only one image as different. The Scale to fit option resizes the second image to the dimensions of the original before comparing.

Why does the image diff show differences when two screenshots look identical?

Two screenshots that look identical often differ in invisible ways: JPEG compression noise, font smoothing, and subpixel rendering change pixel values by small amounts. Raise the color tolerance above 0% and keep Ignore anti-aliasing switched on to hide those differences, so the image diff reports only changes a person could see.

What color tolerance should you use for screenshot comparison?

A color tolerance of 10% is the default for screenshot comparison, because it ignores faint rendering noise but still flags a changed color or a moved element. Use 0% for an exact pixel match between lossless PNG files, and a higher value when comparing JPEG files saved at different quality levels.

Which image formats can you compare?

You can compare any image format your browser can decode, which covers PNG, JPG, WebP, GIF, BMP, and SVG in current browsers, plus AVIF where supported. The two files do not need to share a format, so a PNG screenshot can be compared against a JPG export of the same screen.

Are your images uploaded to a server when you compare them?

No, your images are never uploaded. The image compare tool decodes both files inside your browser, reads their pixels through the Canvas API, and builds the diff on your own device. Nothing is sent to a server or stored between visits, so confidential screenshots and unreleased designs stay on your machine.

How is the mismatch percentage calculated?

The mismatch percentage is the number of different pixels divided by the total pixels in the compared area, multiplied by 100. A 1920 by 1080 screenshot has 2,073,600 pixels, so 20,736 changed pixels gives a 1% mismatch. Anti-aliased pixels that the tool ignores are not counted as different.

How are transparent pixels compared?

Transparent and semi-transparent pixels are blended onto a white background before they are compared. A fully transparent pixel therefore matches a solid white pixel, and two pixels with different transparency are judged by the colors they produce on white. Export screenshots with an opaque background if transparency itself matters.

What is the maximum image size you can compare?

Each image can be up to 16 megapixels, for example 4000 by 4000 pixels, and the combined comparison area has the same limit. A full HD screenshot uses about 2 megapixels and a 4K screenshot about 8.3 megapixels, so both fit. Larger files show an error and should be cropped or resized first.

Can you automate screenshot comparison in a test suite?

Yes, screenshot comparison can be automated, and that practice is called visual regression testing. A test run captures screenshots of each page, compares them against approved baseline images, and fails the build when the mismatch exceeds a set limit. This tool runs the same kind of check by hand for one pair of images.