Compare two images with a perceptual engine (pixelmatch) that ignores anti-aliasing, or an exact byte engine. Groups changes into regions with bounding boxes, reports SSIM, and handles size mismatches with an explicit policy.
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 on a machine with different font smoothing, and you need the real change rather than every anti-aliased edge.
Input
baseline.png vs current.png · perceptual engine · threshold 0.1 · ignore anti-aliasing
Result
0.72% different, 2 changed regions 184 x 44 at (612, 208), 3,104 pixels 28 x 28 at (96, 640), 612 pixels SSIM 0.9931
pixelmatch compares in YIQ colour space and skips pixels that only differ because an edge was smoothed differently, which is what keeps a cross-machine screenshot diff from turning into a wall of false positives. Grouping the changed pixels into bounding boxes turns a percentage into two places to look, and the SSIM score gives a single pass/fail number for CI.
Compare two images and see exactly what changed. Choose the perceptual engine, which uses pixelmatch to ignore anti-aliased edges and catch only differences a person would notice, or the exact engine, which counts every changed byte including alpha. Changes are grouped into labelled regions with bounding boxes, scored with SSIM, and shown through five view modes that redraw instantly because the comparison itself is cached.
Compare screenshots before and after a code change with anti-aliasing detection on, so font rendering differences do not drown out the real ones.
Check that a revision changed only what was intended. The region list turns a percentage into a short list of places to look.
Use the exact engine at tolerance 0 to prove that a re-export is byte-identical, including the alpha channel.
Cross-fade between two versions with onion skin, or read the SSIM score to quantify how much a retouch changed the structure.
Load the before and after screenshots and leave the perceptual engine with Ignore anti-aliasing on. Edge pixels that differ only because text was smoothed differently are skipped, so the regions listed are real layout or colour changes. Click a region to outline it on the canvas.
Switch to the exact engine and set the per-channel tolerance to 0. Any non-zero result means at least one byte differs, including in the alpha channel, and the region list shows exactly where.
When the sizes differ, choose Scale B to A so content is compared rather than layout. Read the SSIM score rather than the pixel percentage, since resampling changes almost every pixel slightly while leaving the structure intact.
Two comparison engines are offered, and which one you want depends on the question you are asking. The perceptual engine is pixelmatch, the library most visual-regression suites are built on. It converts each pixel pair into YIQ colour space and measures perceived distance rather than raw byte distance, which is why its threshold is a single 0 to 1 number (0.1 by default) rather than a per-channel tolerance. More importantly it detects anti-aliasing: before counting a pixel as changed it checks whether that pixel sits on a smoothed edge in either image, and skips it if so. That is the difference between a useful screenshot diff and a wall of false positives, because the same glyph rendered on a different OS or GPU shifts edge pixels by a few levels everywhere. In testing on a pair whose only difference was an anti-aliased diagonal edge, the perceptual engine with anti-aliasing detection on reported zero changes, and reported 399 with it off. The exact engine is the other extreme: an absolute per-channel comparison including the alpha channel, with a 0 to 255 tolerance, where every changed byte counts. Use it when you need to prove two files are pixel-identical.
Changed pixels are then grouped into rectangles by a flood fill with eight-way connectivity, so the result is a list of bounding boxes rather than a single percentage. A pair differing in one 20 by 25 block reports one region of exactly 500 pixels at (10, 10), and each region can be clicked to highlight it on the canvas. A global SSIM score sits next to the pixel percentage, computed on 8 by 8 luma blocks with the same formulation FFmpeg's ssim filter uses; identical images score exactly 1.
When the two images are not the same size, the tool says so in a banner naming both dimensions and applies a policy you choose rather than silently doing one thing. Align top-left draws both at the corner on a canvas big enough for both, so the area only one image covers counts as different, which is honest but inflates the percentage. Scale B to A resamples the second image to the first one's size, comparing content rather than layout, at the cost of the small differences resampling itself introduces. Center both places each image in the middle of the union canvas, keeping a border instead of aligning at a corner.
The work is split so the interface stays responsive: comparison runs in a Web Worker, keyed on the images, engine, threshold, anti-aliasing setting and size policy, and its result is cached. Changing the view mode, the overlay opacity, the slider position or the highlight colour only redraws the canvas from that cached result; in testing, 32 consecutive view interactions triggered zero recomputations. A long comparison shows progress and can be cancelled. Images are decoded with createImageBitmap from object URLs rather than base64 data URLs, and every reply carries a request id so a slow comparison can never paint over a newer one.
Five view modes share the one cached result. Difference paints changed pixels in your highlight colour over a dimmed greyscale copy of image A, so changes are located in context. Side by side places both on one canvas with a gutter and labels. Overlay draws B over A at an opacity you set. Onion skin cross-fades between them. Slider draws A, then clips and draws B from a movable split with a white divider. Both images can be loaded by clicking, dragging onto their panel, or pasting from the clipboard, and a swap button exchanges them. Results export two ways: the current view as a PNG, and a JSON report carrying both file names and sizes, the settings used, the changed-pixel count and percentage, the SSIM score, and every region box.
Perceptual for anything involving rendered content: screenshots, UI, text. It compares the way the eye does and skips anti-aliased edges. Exact when you need certainty that nothing changed at all, including the alpha channel. The two answer different questions, so the tool ships both rather than picking for you.
With it on, a pixel that differs only because it lies on a smoothed edge in one of the images is not counted. That removes the false positives caused by different font smoothing or GPU rendering. On a test pair whose only difference was an anti-aliased diagonal edge, the count was zero with the option on and 399 with it off.
They do not, but you should choose how the mismatch is handled. A banner names both sizes and you pick between aligning at the top-left corner (the uncovered area then counts as different), scaling image B to image A, or centring both on a canvas large enough for both. Nothing is resized silently.
Structural similarity rates how alike two images are on a 0 to 1 scale, where 1 is identical. It is more useful than a pixel percentage when almost every pixel changed slightly (after a resize or a re-encode) but the structure is intact.
On the perceptual engine it is pixelmatch's 0 to 1 matching threshold: smaller is stricter, and 0.1 is the default that roughly matches what the eye notices. On the exact engine it is a per-channel tolerance in 0 to 255 units; set it to 0 to catch every byte-level change.
No. The comparison is cached against the images and the comparison settings, so switching modes or dragging the opacity or split sliders only redraws. Only changing the images, engine, threshold, anti-aliasing setting, or size policy re-runs it.
Images are decoded, edited, and exported entirely inside this browser tab. No originals, exports, or metadata are uploaded.