Loading page
About this tool
Compare two UI designs or images with side-by-side, overlay, slider, zoom, grid, and download controls.
Design Compare puts two images side by side, behind a before/after slider, or stacked as a variable-opacity overlay so you can see exactly where they differ. It adds a difference blend mode that turns identical pixels black and leaves mismatches glowing, a 24-pixel alignment grid, synced zoom from 0.5x to 3x, and panning across both images at once. It is for designers and front-end developers settling the question of whether a build actually matches the mockup.
Open Design Compare on AltFTool — it loads instantly in your browser.
Upload or drag in the file you want to work with.
Adjust the settings and preview the result.
Download the finished file to your device.
Overlaying with mix-blend difference makes matching pixels go black, so anything still visible is a real discrepancy.
Both images share one transform from 0.5x to 3x, so you are always comparing the same region rather than two drifting viewports.
Shows each image's pixel dimensions, format and file size alongside the comparison, which catches scale mismatches before you start hunting for design bugs.
PNG, JPEG, WebP and GIF. Anything else is rejected with a message rather than loaded, and each accepted image reports its natural width and height so you can spot a resolution mismatch immediately.
Switch to overlay mode and turn on the Diff toggle — it applies a difference blend so identical pixels render black and only the mismatches stay visible. Zoom in up to 3x and pan to inspect a specific region once something shows up.
It lays a 24-pixel guide over the preview so you can check alignment, spacing and edge positions against a consistent rhythm rather than judging by eye.
Yes — the download button exports the current comparison view as a standalone HTML file, capturing the mode, opacity, slider position and zoom you set. Images are read locally through object URLs and never uploaded anywhere.