Pixel Diff Tool
See Every Changed Pixel as a Heatmap
Drag two screenshots in. Changed pixels light up red.
You changed a CSS property and you need to know what actually moved. Or your designer says "I only touched the button." Or you need to verify that an inpainting run only affected the region you specified. Drag both images in, hit diff, and you have a pixel-level heatmap in under two seconds.
Original image (left) and its pixel diff heatmap (right) — every changed pixel glows.
Percy and BackstopJS are for your pipeline. This is for right now.
Automated visual regression tools are excellent — when you have the time to set them up, the infrastructure to run them, and a clear baseline to compare against. For the quick manual check that comes up a dozen times a day, they're overkill. This tool is the other 95% of your pixel diff needs.
When to use automated tools (Percy, Chromatic, BackstopJS)
Automated regression testing on every commit. Baseline management across browser and viewport combinations. CI/CD integration with pull request checks. Team-wide visual review workflows. These are the right tools when the process needs to be systematic and repeatable.
When to use this
Right now. Before you commit. When a designer sends you a "small update" and you need to verify what actually changed. When you're comparing two compressed exports. When you need to show someone exactly what moved in a redesign. No SDK to install — just drag, diff, and know.
How the pixel diff heatmap is generated
1. Pixel extraction
Both images are drawn to an HTML Canvas. The tool reads the raw pixel data — every RGBA value for every pixel — using getImageData(). All processing happens in memory, producing the diff instantly.
2. Per-pixel comparison
For each pixel position, the tool calculates the absolute difference across R, G, B, and A channels. The combined delta determines how changed that pixel is — from identical (0) to maximally different (255 per channel).
3. Heatmap rendering
Differences are mapped to a color scale and rendered as an overlay on the canvas. Bright areas indicate significant change. Dark areas indicate no change. Changed areas glow immediately — you don't have to hunt for them.
Full diff heatmap output — bright areas show where pixels differ between two image variants.
When pixel-level diffing matters
🖥️ UI redesign verification
Your designer changed "just the header." Screenshot before and after your deploy and diff them. The heatmap shows you every element that shifted — padding changes, font rendering, element reflow, color adjustments — in a single view. No scrolling through two screenshots and hoping you catch everything by eye.
📦 Compression and export quality
Compare your original PNG against a WebP or JPEG export. The diff heatmap reveals exactly where compression artifacts appear and how severe they are — block boundaries in JPEG, edge ringing in WebP, gradient banding. Find the lowest file size that doesn't produce visible degradation.
🎨 Design version accountability
Your designer says "I only changed the button color." The diff heatmap shows everything that actually changed. Hold design reviews accountable with pixel-level evidence rather than eyeballing two files and trusting that nothing else moved.
🤖 AI output verification
Ran an inpainting operation that should only affect a specific region? The diff confirms whether the rest of the image is truly unchanged. Verify that upscalers, face restorers, and enhancement models only touched what they claimed to touch.
🌐 Cross-browser rendering
Screenshot the same page in Chrome and Firefox at the same viewport. The diff shows every rendering difference — font hinting, anti-aliasing, sub-pixel rendering, margin calculations. Useful for cross-browser QA without setting up a full cloud testing infrastructure.
📱 Responsive layout testing
Compare a page at 1440px versus 1280px to see exactly which elements reflow, resize, or disappear. Useful during responsive design work when you need to verify that a breakpoint change only affected the intended components.
Pixel diff plus two more comparison modes
Diff gives you the objective picture. Blink and split give you the perceptual and regional ones.
Pixel Diff Heatmap
Mathematical per-pixel comparison. Every changed pixel, every channel. The objective, quantifiable view of what changed between two images. Best for technical analysis and QA verification.
Blink Comparison
Rapid alternation at adjustable speed. Your brain's change-detection system flags differences that the heatmap quantifies but that your eye might not locate visually. Best for a quick overall "is anything different?" pass.
Split Wipe
Drag a divider across the image to inspect specific regions in detail. Best for examining a particular UI element, checking a specific layout section, or showing a precise regional difference to a colleague.
Positioned where other tools don't reach
| Capability | Compix | Diffchecker | Percy / Chromatic | ImageMagick CLI |
|---|---|---|---|---|
| Pixel diff heatmap | ✓ Real-time, in-browser | ✓ Server-based | ✓ Cloud-based | ✓ CLI only |
| Zero setup, zero install | ✓ Browser, drag & drop | ✓ Browser-based | ✗ SDK + CI setup | ✗ CLI install required |
| Local processing | ✓ Client-side only | ✗ Images sent to server | ✗ Cloud-based | ✓ Local |
| Blink comparison | ✓ Adjustable speed | ✗ | ✗ | ✗ |
| Compare 50+ variants | ✓ | ✗ Two only | ✓ Via baselines | ✗ Two only |
| CI/CD integration | ✗ Manual only | ✗ Manual only | ✓ Full integration | ✓ Scriptable |
| Price | Free | Free / $12+/mo | $69+/mo | Free (open source) |
Three types of differences — and which comparison mode reveals each
Not all image differences are the same. Understanding which type you're looking for tells you which comparison mode to use.
Structural changes — objects added, removed, or repositioned — are the most dramatic. They produce large, contiguous bright regions in the diff heatmap. Blink comparison makes them immediately visible through the motion they create. Either mode works well here; diff gives you the complete map, blink gives you the fastest initial check.
Tonal and color shifts — global color grade adjustments, white balance changes, exposure corrections — produce a uniform low-level change across the entire image. In a diff heatmap, this appears as a faint, even glow. Blink comparison is often better for detecting these perceptually, because the alternation makes even slight overall color shifts visible as a single "blink" — the whole image appears to jump in tone when you switch.
Compression artifacts and sub-pixel changes — the kind introduced by JPEG encoding, WebP conversion, or format changes — are the subtlest. They're often invisible to the naked eye but measurable by a diff tool. The heatmap reveals spatial distribution: block boundaries in JPEG, edge ringing in WebP, gradient banding in areas of smooth color. This is where pixel diff provides information that no amount of visual inspection can replicate.
Using all three modes together
The most thorough comparison workflow uses all three modes in sequence: diff for the objective overview (what changed and where), blink for the perceptual check (what looks different to a human viewer), and split wipe for the detailed regional inspection (what does a specific area actually look like in each version). No single mode is sufficient for every type of difference. Running all three takes under 90 seconds and gives you complete confidence that you've caught everything. See the full comparison toolkit at /before-after-comparison.
Technical questions
Other comparison workflows
Before & After Tool
The full comparison toolkit: blink, split wipe, pixel diff, multi-state, GIF export, and scene compositor in one place. Open →
AI Image Comparison
Compare Stable Diffusion outputs, Midjourney variations, and Flux generations. Load 50 outputs at once. Open →
Retouching QA Tool
For professional retouchers: blink your raw against your retouched export and catch every missed spot before delivery. Open →
Compare Upscaled Images
Pixel diff is ideal for upscaler comparison — see exactly where Topaz and Real-ESRGAN diverge. Open →
Scene Compositor
Layer images, add shapes, animate with a timeline, and export as PNG, GIF, or MP4. Open →