Diff Image
Compare two images pixel by pixel.
Overlay
About Diff Image
Two images can look identical on screen and still differ by a handful of pixels, which is exactly the gap that QA review misses and a pixel comparison catches. This tool loads both images, aligns them on a shared canvas, and marks every position where the pixel values drift apart by more than a threshold you control. The result is an overlay: the first image dimmed to grayscale, with the differences painted in a highlight color you pick, plus a count and percentage of affected pixels. An anti-aliasing tolerance option ignores soft edge differences introduced by resampling, so a screenshot rendered on a slightly different machine does not light up like a Christmas tree. Typical uses include verifying a rebuild of a design, confirming a photo edit changed only what was intended, and spotting tampering in supposedly identical exports. The comparison runs locally, so unreleased screenshots stay on your machine.
How to Use Diff Image
Load both images
Drop the reference image on the left and the comparison image on the right. PNG, JPG, and WebP all work, and the canvas sizes itself to the larger of the two.
Set the threshold
The threshold decides how different a pixel must be before it counts. A low value near zero flags even compression noise; sixteen to thirty-two filters JPEG artifacts while catching real changes.
Run the comparison
Click Compare. The overlay appears with differences highlighted in your chosen color, and a line reports how many pixels changed and what percentage that is.
Read and download the overlay
Small scattered dots are usually compression; coherent blocks are real changes. Download the overlay as a PNG to attach to a bug report or review note.
Why Use Diff Image: Common Use Cases
Verifying visual regression after a rebuild
Screenshot a page before and after a dependency update or redesign, and confirm the only changed pixels are the ones you meant to change.
Checking an edit was surgical
Compare a retouched photo against its original and see whether the edit stayed inside the intended region instead of smearing the whole frame. If colors shifted subtly, Color Palette Extractor shows what each version is actually made of.
Spotting edits in supposedly identical files
Two exports of the same document should differ by nothing. Any highlighted region is a lead worth investigating, from a changed number to a patched logo.
Comparing rendering across machines
Run the same design through two renderers and see exactly which glyphs and gradients behave differently, with the anti-alias option taming harmless edge noise.
Diff Image Specifications
| Input Formats | Two images (PNG, JPG, WebP), Threshold, Highlight color, Anti-alias toggle |
|---|---|
| Output Formats | Difference overlay PNG, Changed pixel count and percentage |
| File Size Limit | No strict limit (dependent on device memory) |
| Processing Engine | 100% Client-side (Runs locally in your browser) |
| Data Retention | Files never leave your device |
| Batch Processing | Single file processing |
Tips for Diff Image
Use lossless PNGs for both sides when precision matters. JPEG compression alone can move hundreds of pixels and muddy the comparison.
Raise the threshold before assuming something is broken. A value of 16 hides typical codec noise, while real changes usually exceed it by far.
Leave anti-aliasing on for text-heavy screenshots. Glyph edges resample softly, and the tolerance distinguishes that from genuine layout shifts.
Images of different sizes are compared on the larger canvas, with the smaller one anchored top-left. Crop them to the same region first for a fair fight.
Want to inspect the metadata of the images too, such as camera or software tags? Image Metadata reads the embedded information.
Frequently Asked Questions
How does the pixel comparison work?
Both images are drawn onto one canvas and read back as raw pixel arrays. Each position's red, green, and blue distances are averaged, and positions above your threshold are marked. The math is straightforward by design, so results are predictable.
What threshold should I use?
Start at 16. If compression noise lights up the overlay, raise it. If faint but real changes are missing, lower it toward zero and compare PNG sources instead of JPEG where possible.
What does the anti-aliasing option do?
It skips pixels whose neighbors differ much more strongly than they do, which is the signature of a soft resampled edge rather than a content change. Turn it off when comparing pixel art or exact binary outputs.
Can it compare images of different sizes?
The canvas takes the larger width and height, and the smaller image is compared from the top-left corner. Areas beyond the smaller image count as differences, so matching crops give the cleanest report.
Is the percentage score meaningful across image pairs?
It is meaningful within a pair: it tracks whether a change shrank or grew between iterations. Across different image pairs the score depends on content, so compare percentages only between related images.
Are my screenshots uploaded anywhere?
No. Reading pixels and drawing the overlay happen on a canvas in your browser. Internal screenshots and unreleased designs are common inputs here, which is why nothing leaves the device.