Image Diff
Compare two versions of an image, design mockup, or screenshot. Spot modified pixels, slide interactive split-wipe handles, blend overlays, and inspect visual changes without uploading files.
1. Original Image (A)
Baseline screenshot or reference design
2. Modified Image (B)
New version, rendered output, or test artifact
How to Compare Two Images Pixel by Pixel
Catch subtle layout shifts, color changes, and visual edits in three quick steps.
Select Baseline & Updated Images
Drop your original baseline (Image A) and modified version (Image B) into the upload cards, or click Try with Sample UI Screens.
Adjust Sensitivity & Alignment
Fine-tune the tolerance slider or enable antialiasing detection to filter out minor font-smoothing differences.
Inspect & Download Diff
Drag the split slider or inspect the red difference heatmap, then export the highlighted comparison as a PNG file.
Why Use Pinatool’s Image Diff Tool?
Four Interactive View Modes
Switch between Diff Heatmap, Split Wipe slider, Opacity Cross-Fade, and Side-by-Side views.
Smart Tolerance & Alignment
Filter out compression noise, isolate anti-aliased edges, and compare images of different sizes.
Browser-Local Processing
Your files are processed directly in your browser and are not uploaded to Pinatool's servers.
Frequently Asked Questions
Common questions about pixel-by-pixel visual comparison and difference heatmaps.
How does the Image Diff Tool highlight pixel differences?
The tool aligns both images and compares each corresponding pixel pair for perceptual color and brightness shifts. Changed pixels exceeding your sensitivity threshold are highlighted in vivid red, while matching areas are softened into a clear reference background.
What is the Antialiasing Check toggle?
Rendered text and curved icons often have slight edge-smoothing differences across operating systems or browsers. Enabling Antialiasing Check marks subtle edge smoothing in amber so you can separate real layout changes from minor font-rendering variations.
Can I compare two images that have different dimensions?
Yes. The tool offers three dimension alignment modes: "Top-Left" (aligns top-left corners and expands the canvas to fit the larger image), "Center" (centers both images relative to each other), and "Scale to Fit" (scales the second image to match the first).
Are my proprietary UI screenshots uploaded to any server?
Never. All image comparison, split-slider rendering, and difference map generation run 100% inside your local browser. Your confidential designs, client mockups, and internal dashboards never touch a remote server.
What inspection modes are available to review differences?
You can switch between four viewing modes: (1) Diff Heatmap (highlighting changes in red and amber), (2) Split Wipe Slider (draggable divider comparing before and after), (3) Overlay Blend (opacity cross-fader), and (4) Side-by-Side.
Explore More Tools
Fast browser-local tools for cropping, resizing, and redacting images.