Image Diff Checker

During UI testing and design review, comparing before-and-after screenshots side by side is a common task. However, the human eye can easily overlook subtle pixel shifts or color changes, especially on large screens or complex layouts.

Image Diff Checker compares two images pixel by pixel, calculates color distance for each pixel, and highlights differences exceeding a configurable threshold. The result is rendered on a canvas as a diff image, with match percentage and different-pixel count displayed numerically.

Choose from three visualization modes: highlight mode (emphasize differences with customizable color), fade mode (smoothly transition between images), and slider mode (overlay images for precise comparison). The highlight color can be customized using a color picker, enabling support for color-blind users.

By adjusting the threshold slider, you can ignore minor anti-aliasing differences or catch even the slightest variation. The auto-resize feature handles images of different dimensions, making it easy to compare screenshots at different resolutions.

All processing happens locally in the browser—no need to worry about sending internal designs or unpublished mockups to external services. Use it for pre-CI self-checking, designer-engineer alignment, print proof verification, color-blindness testing, and many other comparison scenarios.