How is the diff computed?

Both images are drawn into equally-sized canvases. We walk every pixel and compute the Euclidean distance in RGB space; any pixel beyond the threshold distance is flagged as changed and overlaid in red. Total changed pixels are summed and divided by total pixels to produce the percentage.

What if my images are different sizes?

We resize the smaller image up to the larger dimensions using nearest-neighbour interpolation. For accurate diffs feed identically-sized inputs — otherwise alignment shifts will register as 'changes'.

Is this perceptual or pixel-exact?

Pixel-distance, not perceptual. A true perceptual diff (using ΔE in CIELAB) is on the roadmap. For most QA and visual regression tasks pixel distance with threshold 10 is sufficient.

Will it ignore anti-aliasing?

Sub-pixel anti-aliasing differences register as real changes. Bump threshold to 15–20 to absorb most AA differences.

Are my images uploaded?

No. Both images stay in your browser. The diff is computed locally; the result downloads from your tab.

What's the maximum image size?

Up to roughly 16 megapixels per image. Larger images slow the per-pixel loop; pre-resize them with our Resize tool first.

Free Image Diff — Side-by-Side, Slider, Highlight, Onion

Comparing before/after versions of a design, screenshot or photo is fundamental to QA, design reviews and visual regression testing. PikDraw's Image Diff offers four comparison modes plus a per-pixel difference map — entirely in your browser, free.

What is the Image Diff — Side-by-Side, Slider, Highlight & Onion?

Image Diff is a client-side pixel-diff and visual-comparison tool. Drop two images, pick a comparison mode (highlight, side-by-side, onion, slider), set a tolerance threshold, and inspect or download the result.

Key features

Four comparison modes (Highlight / Side-by-side / Onion / Slider)
Pixel-distance threshold (0–100)
Changed-pixel count + percentage report
Auto-resize for mismatched dimensions
PNG export of the diff overlay
Interactive slider for design reviews
100% client-side — images never upload
Free, unlimited, no signup or watermark

How it works

Both images are decoded into equally-sized canvases. We pull getImageData buffers and compute Euclidean RGB distance per pixel. Pixels exceeding the threshold are written to a transparent overlay canvas in red. Side-by-side, onion and slider modes composite the two source canvases differently. The changed-pixel count is summed and reported.

Why use this tool

Desktop tools (Beyond Compare, Kaleidoscope) cost money and lock you to a platform. CLI tools (ImageMagick compare) require setup. Online diff tools often upload your images. PikDraw's diff is free, browser-native, multi-mode, and respects your privacy.

Common use cases

Design review (Figma export vs implemented UI)
Visual regression testing screenshots
Photo comparisons (edited vs original)
QA bug reports with diff overlays
Comparing watermarked vs clean versions
Tracking subtle changes across product photos
Detecting unwanted edits to an image

How to use this tool

Upload two images — Drop the 'before' and 'after' images. They should be the same dimensions for the cleanest diff — mismatched sizes will be auto-resized to the larger image.
Pick a diff mode — Highlight (mark changed pixels in red), Side-by-side (the two images aligned for visual scan), Onion (semi-transparent overlay) or Slider (drag to wipe between them).
Set the threshold — Tolerance (0–100) controls how aggressively differences are detected. 0 flags every changed pixel; 20 ignores compression noise; 40+ ignores subtle gradient shifts.
Inspect the diff — The output highlights changed regions and reports the number of pixels and percentage of the image that changed — useful for QA and visual regression tests.
Download the diff — Export the highlight overlay or any composite mode as a PNG for bug reports, design reviews or release notes.

Who should use this

QA engineers automating visual regression checks, designers reviewing implementation pixel-perfection, photographers comparing edits, product managers documenting bugs, anyone asking 'what changed?'.

How to get started

Drop both images, pick Highlight mode, set threshold to 10, click Compare. Inspect the percentage and download the overlay if you want to share it.

Best practices

Feed identically-sized images for accurate diffs
Threshold 10 is the sweet spot for ignoring JPG noise
Use Slider mode for live design reviews
Pair with Image Compare for an embeddable before/after widget
Pre-align with Aspect Crop if dimensions differ

Pro tips

Same dimensions = cleanest diff — pre-align with Aspect Crop if needed.
Threshold 10 catches real changes while ignoring JPG compression noise.
Use Slider mode for design reviews — drag to compare A and B in place.
Pair with Image Compare for an embeddable before/after for blog posts.

Expert insights

💡 Threshold 10

10 is the sweet spot — catches real changes while ignoring JPG compression noise.

💡 Slider for Reviews

Slider mode is gold for design reviews — drag the wipe to compare A and B in place.

💡 Same Dimensions

Pre-resize or crop both images to identical dimensions for the cleanest diff.

Limitations to be aware of

Pixel-distance only — perceptual ΔE diff coming soon
Anti-aliasing registers as small differences
Resizes mismatched inputs (potential bias)
No region selection or ignore-mask in v1

Frequently asked questions

How is the diff computed?: Both images are drawn into equally-sized canvases. We walk every pixel and compute the Euclidean distance in RGB space; any pixel beyond the threshold distance is flagged as changed and overlaid in red. Total changed pixels are summed and divided by total pixels to produce the percentage.
What if my images are different sizes?: We resize the smaller image up to the larger dimensions using nearest-neighbour interpolation. For accurate diffs feed identically-sized inputs — otherwise alignment shifts will register as 'changes'.
Is this perceptual or pixel-exact?: Pixel-distance, not perceptual. A true perceptual diff (using ΔE in CIELAB) is on the roadmap. For most QA and visual regression tasks pixel distance with threshold 10 is sufficient.
Will it ignore anti-aliasing?: Sub-pixel anti-aliasing differences register as real changes. Bump threshold to 15–20 to absorb most AA differences.
Are my images uploaded?: No. Both images stay in your browser. The diff is computed locally; the result downloads from your tab.
What's the maximum image size?: Up to roughly 16 megapixels per image. Larger images slow the per-pixel loop; pre-resize them with our Resize tool first.

Browse all PikDraw image tools →