Image Diff
Upload two images and instantly compare them with pixel-level precision using side-by-side, overlay, or diff view.
About This Tool
The Image Diff tool is a free, browser-based utility that lets you compare two images at the pixel level. Whether you are performing visual regression testing, checking design changes, comparing image compression artifacts, or verifying photo edits, this tool highlights every difference between a "before" and "after" image instantly.
The tool offers three comparison modes. Side by Side displays both images next to each other for quick visual scanning. Overlay uses a slider to seamlessly transition between the two images, making it easy to spot subtle shifts in layout or color. Pixel Diff computes the exact difference between every pixel and renders changed pixels in magenta against a grayscale background, with a bounding box around the affected region.
All processing happens entirely in your browser using the Canvas API's getImageData() method. No images are uploaded to any server, making it safe to compare proprietary designs, screenshots containing sensitive data, or internal assets. The tolerance slider (0-50) allows you to filter out minor color variations caused by anti-aliasing, JPEG compression, or subpixel rendering differences.
If you need to compare text-based content instead of images, try the Diff Viewer for line-by-line text comparison, or the JSON Diff tool for structural JSON comparison. For color-related analysis, the Color Converter helps you inspect and convert between HEX, RGB, and HSL values.
How to Use
- Upload the "Before" image by dragging and dropping it into the left upload area, or click "Choose File" to select it from your device.
- Upload the "After" image into the right upload area using the same method.
- The tool automatically computes the pixel-level diff. View the stats badges showing changed pixel count, total pixels, and difference percentage.
- Switch comparison modes using the tabs: Side by Side, Overlay (slider), or Pixel Diff.
- In Overlay mode, drag the slider left and right to reveal each image and spot changes.
- Adjust the Tolerance slider (0-50) to filter out minor color variations like anti-aliasing differences.
- Use Zoom in/out buttons to inspect details, and pan the image by clicking and dragging when zoomed in.
- Click Download Diff to save the diff visualization as a PNG, or Copy Stats to copy the results to your clipboard.
Popular Image Diff Examples
FAQ
Is my data safe when using this tool?
Yes. All image processing happens entirely in your browser using the Canvas API. No images are uploaded to any server, stored, or logged. Your images never leave your device, making it safe to compare proprietary designs and screenshots containing sensitive information.
What image formats are supported?
The tool supports all image formats that your browser can render, including PNG, JPEG, GIF, WebP, SVG, and BMP. For best results with pixel-level comparison, use lossless formats like PNG to avoid JPEG compression artifacts.
What does the tolerance slider do?
The tolerance slider (0-50) controls how sensitive the pixel comparison is. A tolerance of 0 flags any pixel that differs by even a single value. Higher values ignore minor differences caused by anti-aliasing, JPEG compression, or subpixel rendering, focusing only on significant visual changes.
Can I compare images of different sizes?
Yes. The tool uses the maximum dimensions of both images. If one image is smaller, the extra area in the larger image will be shown as changed pixels in the diff view. For the most accurate comparison, use images of the same dimensions.
What do the colors in the pixel diff view mean?
In pixel diff mode, magenta/pink pixels indicate areas where the two images differ beyond the tolerance threshold. Grayscale pixels represent unchanged areas. A red bounding box outlines the region containing all detected changes.
How is the difference percentage calculated?
The difference percentage is calculated as (number of changed pixels / total pixels) * 100. A pixel is considered 'changed' when the maximum difference across any color channel (R, G, B, A) exceeds the tolerance threshold.
Related Tools
Diff Viewer
Compare two texts side by side with line-by-line and character-level diff highlighting.
JSON Diff
Compare two JSON objects structurally. Detect added, removed, and changed values with key-order-independent diff.
Color Converter
Convert colors between HEX, RGB, HSL formats with contrast checker and palette generator.
SVG Path Editor
Visually edit SVG path d attributes with draggable control points, command palette, bezier curve handles, and real-time preview.