Image Diff Checker

Drop in two images and compare them five ways: side by side, a swipe slider, a pixel-difference blend, a change highlight and a fade. Everything is drawn in your browser; images are never uploaded.

About this tool

Use Side-by-side to view both images at once, Slider to swipe a divider between them, Difference to blend them so any changed pixels light up against black, Highlight to tint the exact pixels that differ (with a sensitivity control and a "% of pixels changed" readout), and Fade to cross-dissolve from one to the other. This is ideal for QA on design mockups, spotting tampering, comparing screenshots across releases, or checking whether an "optimised" asset actually changed. The two images are compared over their overlapping area; if their dimensions differ, that is noted. Nothing is uploaded, all rendering happens locally on a <canvas>.

Frequently asked questions

Do the images have to be the same size?

No, but the difference and highlight views compare the overlapping top-left region, so identical dimensions give the most meaningful pixel comparison. Slider and fade scale the second image to match the first.

Are my images uploaded?

Never. They are read with the browser's FileReader and drawn to a canvas locally. Nothing is sent to any server.

Which formats are supported?

Anything your browser can render: PNG, JPEG, WebP, GIF (first frame), BMP and SVG.

Related tools