Compare two images pixel-by-pixel. Multiple comparison modes: side-by-side, overlay, difference highlighting, onion skin, and slider. Perfect for visual regression testing.
Compare two images and highlight the differences between them. Upload a before and after version, and the tool overlays a diff visualization showing exactly what changed. Useful for QA, regression testing, or verifying design changes.
Initializing in your browser…
Resize and scale images with smart aspect ratio control. Supports custom dimensions, percentage scaling, social media presets, and batch resizing while maintaining image quality.
Create pixelated effects with square, circle, diamond, or hexagon shapes. Features presets for retro gaming, mosaic art, and privacy blur effects.
Crop and trim images with precision visual selection. Features aspect ratio presets (1:1, 16:9, 4:3), free-form cropping, grid overlays, and pixel-perfect adjustments for professional results.
A visual regression test failed and you need to see exactly which pixels changed between two screenshots.
Input
baseline.png vs current.png
Result
0.7% pixels differ, highlighted cluster around the moved button
A pixel-level diff with a tolerance threshold isolates real changes from noise and visualises them, so a regression is localised in seconds instead of by squinting at two tabs. The percentage gives a pass/fail signal for CI-style checks.
Compare two images and highlight the differences between them. Upload a before and after version, and the tool overlays a diff visualization showing exactly what changed. Useful for QA, regression testing, or verifying design changes.
Compare screenshots before and after code changes to catch unintended visual differences.
Verify that a design revision changed only what was intended.
See exactly what changed between two versions of an edited photo.
Load the before/after screenshots, switch to Difference mode, and leave the highlight at #ff0000. Identical pixels collapse to near-black (30,30,30) while changed regions glow red, making a moved button or recolored header obvious; the stats panel then quantifies it, e.g. 0.42% different across the total pixel count.
In Onion Skin mode, drag the opacity slider from 0 toward 1 to cross-fade image A into image B over a #111 backdrop, which makes a subtle retouch (a removed blemish, a tone tweak) read as a localized shimmer rather than two flat layers.
The comparison runs entirely in the browser on a canvas. Both images are drawn onto temporary canvases sized to the per-axis maximum of the two inputs (Math.max of widths and Math.max of heights), so if your two images differ in size, the smaller one is not stretched to fit, it sits at the top-left and the uncovered region reads as a difference. For a meaningful pixel comparison you want both images at identical dimensions, captured at the same viewport and zoom. The tool then walks the RGBA buffer four bytes at a time, taking the absolute difference of the red, green, and blue channels separately, and flags a pixel as changed if any single channel exceeds the sensitivity threshold (a logical OR across channels, not a combined distance). The threshold defaults to 10 and is adjustable from 0 to 100; the alpha channel is not part of the test. This per-channel-OR test is also why anti-aliased text and sub-pixel font rendering can light up as false positives in visual regression work, the same glyph rendered on a different OS or GPU shifts edge pixels by a few levels, so a non-zero threshold exists specifically to absorb that noise.
Five render modes share that same changed-pixel count but visualize it differently. Difference mode paints flagged pixels with your chosen highlight color (default #ff0000) and renders unchanged pixels as near-black (RGB 30,30,30), so changes glow against a dark field. Overlay draws image A then image B on top at an opacity slider value (default 0.5). Onion skin fills the canvas with #111 first, then blends A at 1 minus opacity and B at opacity for a fade between the two states. Slider draws A in full, then clips a rectangle starting at the slider position percentage and draws B inside it, with a 2px white divider line. Side-by-side widens the canvas to two image widths plus a 20px gutter on a slate (#1f2937) background and labels each panel Image A and Image B. Regardless of mode, the changed-pixel count that drives the stats is computed the same way from the per-channel-OR test described above.
Above the canvas, a stats panel reports the changed-pixel percentage to two decimals, the raw count of differing pixels, and the total pixel count (width times height), with a green-to-red bar that saturates at 50% difference. The opacity, highlight-color, slider-position, and threshold controls are surfaced only for the modes that use them, and mode, threshold, highlight color, and opacity are all stored in the URL so a specific comparison setup can be shared as a link (the slider position and the 0.25x-4x preview zoom are local state and are not part of the shared link). The rendered comparison can be exported as a PNG via the canvas, named image-diff-(timestamp).png. There is no server round-trip and no automatic alignment or registration step, so this is a literal pixel comparator rather than a perceptual or structural-similarity diff.
For accurate pixel comparison, yes. If sizes differ, the tool may resize one to match, but results are best with identically sized images.
It sets how much a pixel must change before it is flagged as different. Higher sensitivity catches subtle changes; lower sensitivity ignores minor variations.
Images are decoded, edited, and exported entirely inside this browser tab. No originals, exports, or metadata are uploaded.