Loading...
Loading...
Drop two images and highlight every changed pixel. Adjust the threshold to ignore minor compression noise, see the exact change percentage, and export the diff as PNG.
Choose two images to start comparing them pixel by pixel.
A pixel diff visualizer compares two images at the pixel level and highlights every position where the color values differ. It is the visual equivalent of a code diff: you see exactly what changed between two screenshots, two design exports, or two snapshots from a regression test. This tool runs entirely in your browser using the HTML Canvas API. It scans every pixel in image A against the matching pixel in image B, sums the absolute channel differences, and paints any pixel above your threshold in the highlight color you pick. You also get a change percentage so you can quantify how much the two images actually differ.
Drop or pick image A (the baseline) and image B (the version you want to compare). Same dimensions are recommended; mismatched sizes are auto-scaled to image A.
Highlight changes is the default — every changed pixel gets painted in your highlight color. Side by side renders A, B, and the diff in one strip; Overlay stacks B at 50% opacity over A.
Drag the threshold slider up to ignore minor compression noise and small JPEG artifacts. 5% is a good starting point for compressed photos; 0% catches every single pixel difference.
The Change percentage tells you what fraction of pixels exceed the threshold — handy for regression review or design QA.
Click Download to save the rendered diff at full resolution. Useful for code review attachments and bug reports.
For each pixel position p, with channels (r, g, b) from images A and B: diff(p) = |Ar - Br| + |Ag - Bg| + |Ab - Bb| A pixel is treated as different when: diff(p) > (threshold% × 765) / 100 where 765 = 3 × 255 is the maximum channel-sum difference. This is the same L1 distance metric used by image-diff tools like pixelmatch and resemble.js, just expressed as a single tunable threshold rather than per-channel tolerances.
The L1 (Manhattan) distance over RGB channels is the simplest metric that catches both color shifts and brightness shifts. Alpha is ignored because most diff use cases (screenshots, photo regressions) operate on opaque images. For images with different dimensions, image B is rescaled to image A using high-quality bilinear filtering before the comparison runs.
Reference: pixelmatch — pixel-level image comparison
| Inputs | Diff result |
|---|---|
Two identical 1920×1080 PNGs | 0% change — diff is fully dim No pixels exceed the threshold; ideal regression-test pass. |
Two JPEGs of the same scene at 85% quality | ~1–2% with threshold = 0 Compression noise creates tiny per-pixel differences; raise threshold to 5% to ignore. |
Design export A vs B (button color changed) | Change confined to the button rectangle Highlight color makes the modified region instantly visible. |
Cut out the subject from any photo with on-device AI — no upload required.
Shrink JPG, PNG, or WebP files in your browser with an interactive quality slider.
Adjust, filter, rotate and crop photos in the browser — no uploads, no watermark.
Compose memes and screenshot collages with real layers — paste, drag, crop, caption, export.
Last updated