Compare Two Images
Drag slider, side-by-side, overlay fade, or pixel-level diff heatmap. Upload any two images and see exactly what changed — no upload to any server.
Upload both images above to start comparing
Image A loaded — now upload Image B Image B loaded — now upload Image A
Four Ways to Compare Your Images
Choose the comparison mode that shows what you need — from a quick visual swipe to a precise pixel-level analysis.
How to Use This Tool
Logic Behind the Tool
position: absolute with object-fit: contain. Image B's wrapper div is given width: {sliderPos}% with overflow: hidden, clipping it to reveal only the left portion. Image A fills the remaining right area. Mouse and touch events on the container update sliderPos in real time.opacity controlled by the range slider (0 = fully invisible, 1 = fully visible). Where the images differ, the blended result creates a "ghost" effect that highlights discrepancies.ImageData.data) are compared element-by-element. For each pixel, the per-channel absolute difference is averaged to produce a single delta value (0–255).HTMLImageElement objects are stored outside the Alpine.js reactive data object to avoid performance overhead from proxying large objects. Only lightweight metadata (src, dimensions, file size) is stored in reactive state. The image elements are retrieved by side key ('A' or 'B') during diff computation.touchmove has .prevent to block page scrolling during horizontal drags. The clientX coordinate is extracted from either the mouse event or e.touches[0] and normalised against the container's bounding rect to compute a 0–100% slider position.Frequently Asked Questions
The Overlay mode is usually the most effective for subtle differences. As you slowly drag the opacity slider from A to B, any area that changes will create a flicker or ghost effect that's hard to miss — even for small colour shifts. For precisely locating where differences are, follow up with Pixel Diff mode, which will highlight changed pixels as coloured dots on a grey background.
Yes. All four modes handle different sizes gracefully. The comparison container uses object-fit: contain, so each image is scaled proportionally to fit. They won't be pixel-aligned if they're different sizes, but you'll still be able to compare visual content. For the Pixel Diff mode, both images are drawn onto the same canvas at the same dimensions — the smaller image will be stretched to fill the space, which means the diff is more meaningful when comparing images that were originally the same size or very close in size.
The average colour delta is the mean absolute RGB difference across all pixels, on a 0–255 scale. A value near 0 means the images are nearly identical. A value around 10–30 typically indicates minor edits like brightness/contrast adjustments. A value above 50 suggests substantial visual changes. It's the average over the entire image, so a single heavily-changed region in an otherwise identical image will still produce a relatively low average.
The diff computation is CPU-intensive: it draws both images onto canvas elements, reads the pixel arrays, then processes every pixel in a loop — up to 1,200 × 1,200 = 1.44 million pixels for large images. JavaScript runs single-threaded in the browser's main thread, so this takes a brief moment for large images. The computation yields to the UI first (so the loading spinner appears), then runs to completion. There's no way to meaningfully speed this up further without WebWorkers or WebAssembly.
Common uses include: comparing photo edits (before/after retouching or colour grading), verifying that a UI screenshot hasn't regressed between versions, checking that a resaved image hasn't lost quality compared to the original, comparing two versions of a graphic design, reviewing visual diff output from automated testing, and checking print vs. screen colour differences. The slider mode is great for photo editing review; the pixel diff mode is more useful for automated visual regression analysis.