Image Compare

Slider: drag an interactive divider to reveal one image or the other — the classic before/after view. Side-by-side: both images shown at full width next to each other. Overlay: one image layered on top of the other with adjustable opacity (useful for checking alignment). Difference: highlights exact pixel-level changes in red; identical areas appear dimmed.

No. Different sizes are scaled automatically to fit the comparison view. However, for a meaningful pixel-difference comparison, images of the same dimensions produce the most useful results — otherwise the diff shows scaling artifacts rather than content changes.

The difference mode computes the absolute per-channel RGB difference between corresponding pixels. Changed pixels appear as bright red; unchanged areas are dimmed. This is useful for catching subtle changes in design updates, catching compression artifacts, or verifying that a transformation is lossless.

Upload two images, select Slider mode, then drag the vertical divider left and right. The left side shows Image A, the right shows Image B. Works with both mouse and touch, so it is usable on tablets and phones.

Overlay mode layers both images on top of each other at a configurable opacity. Useful for checking alignment between a design mockup and a screenshot, verifying registration of two versions of the same photo, or checking if a logo sits in the correct position across two layouts.

Yes. Zoom controls let you zoom in to see individual pixel differences. Use the "Fit" option to scale back to the viewport or "100%" to view actual pixel size.

No. All comparison processing runs locally in your browser using HTML5 Canvas. Images are loaded into memory from your device and never transmitted to any server.