Image Compare

Image Compare places two pictures on top of one another and lets you drag a handle across the view to reveal each side in turn. One image is revealed on one side of the handle and the other on the opposite side, which turns the comparison into a live, hands-on inspection instead of a wall of numbers.

The tool accepts two files from JPG, PNG or WebP, scales both to a shared view and anchors the comparison to the smaller image so that nothing is cropped or stretched out of proportion. Because the two files are handled entirely in the browser, the comparison is immediate and nothing is ever uploaded.

The natural use is before-and-after work. A photo retoucher compares the raw capture with the graded version. A designer checks a mock-up against the implemented page. A developer verifies that a compression pass did not introduce visible damage by sliding between the source and the optimised export. Whenever the question is "can I see the difference?", this tool is the fastest way to find the answer with your own eyes.

Image Compare shows you differences; it does not measure them. If the review must conclude with a number, or if a difference is too subtle for the eye even side by side, the quantitative tools in this suite take over. The Image Difference Checker produces a heatmap, the Pixel Difference Checker reports the exact percentage of differing pixels, and the Image Similarity Checker returns a single similarity score.

Both files, each up to about 25 MB, are read from your device and processed locally. The page never transmits the images, and closing or reloading the tab clears them from memory. Your originals are always left untouched; the tool only displays, it never rewrites.

The practical limitation is that the slider shows pixel geometry, not meaning. Two images that differ only by a one-pixel shift can look dramatically misaligned under the handle, while a colour shift across an entire frame can be easy to spot at full view but hard to quantify. Treat the slider as a discovery tool and pair it with a numeric checker when the decision matters.

The interaction model itself matters more than it first appears. A side-by-side layout forces the viewer to shift attention between two spatially separated images, which introduces a memory load and makes subtle differences easy to miss. The slider keeps both versions in the same visual field and lets the boundary itself carry the signal, which is why it consistently finds differences that static comparison misses.

When deciding how to present a comparison to a stakeholder, consider whether the audience needs to see a difference or needs to understand it. Showing someone the slider produces an immediate visceral reaction; presenting a heatmap or a percentage produces a measured, data-backed response. The best workflow uses both in sequence: the slider to demonstrate, then the number to justify.

The slider is genuinely the best tool for before-and-after review because it isolates the change from everything around it. A thumbnail grid of two images forces the eye to jump between frames and mentally align them; the slider keeps both versions in the same coordinates and moves the boundary across the differences.

To get the most out of it, load the images so that content lines up, drag the handle across the areas that matter and let the reveal happen at human speed. Areas that differ jump, and areas that match simply look static, which is exactly the signal you want.

• Compare raw versus graded versions of the same photo.
• Check a design mock-up against the implemented page element.
• Verify that compression or conversion did not damage the image.
• Review retouching, watermarking or colour-adjustment edits.

The comparison tools are complementary because they answer different questions at different levels of certainty. The slider answers "show me", the heatmap answers "where are the changes concentrated?", the pixel tool answers "how many pixels changed and in which channels?", and the similarity checker answers "how alike are these pictures as one percentage?".

In practice a review often starts with the slider to understand the nature of the change, then moves to a numeric tool only when the verdict must be recorded, compared across builds, or automated.

Comparison only makes sense when both images occupy the same visual space, so the tool scales each file to the shared view. When the two files have different dimensions, both are fitted to the smaller image's bounding box, which prevents one frame from being cropped or the other stretched into an unfair comparison.

Scaling to fit means the comparison works across size mismatches, but it also means very different compositions stay visibly misaligned, because no amount of scaling can line up photographs that frame their subjects differently. If the goal is pixel-level truth rather than a visual impression, skip the slider entirely and use a pixel diff tool, which works in exact coordinates.

When the flicker convinces you the output is damaged, go back to the compression tool, raise the quality, and re-run the same comparison on the new export. The slider turns a one-off compression into an iterative, verifiable loop.

A fair comparison starts before the tool opens. Export both versions from the same source, keep rendering settings consistent, and avoid letting screen conversions, colour profiles or platform compression quietly alter one side. Two files exported from the same edit at different moments are still comparable; two screenshots taken on different monitors are not.

When the two images differ in resolution, decide in advance whether the comparison is about framing (use the slider and its auto-fit) or about exact pixels (use a diff tool). Expecting the slider to arbitrate a pixel argument is how false conclusions creep into otherwise careful review work.

• Export both sides from the same editor and source where possible.
• Keep colour management consistent so hue differences mean real edits, not profile drift.
• Anchor the review to the areas most likely to change.
• Follow up any visual finding with a numeric check when a verdict must be recorded.

The slider and the side-by-side layout are two different communication strategies, not just two interface options. The slider is best for an audience that needs to feel the difference, while side-by-side works when both images must be visible simultaneously for an extended, detailed review.

Slider interactions also mask a subtle bias: where the handle sits when the viewer first looks at the comparison anchors their perception. If the handle rests at the midpoint, differences near the centre get disproportionate attention. Move the handle to the edges first, then sweep inward, so every region of the frame gets equal inspection.

• Slider for visceral before-and-after demonstrations.
• Side-by-side for sustained, detailed dual inspection.
• Move the handle across the full width to avoid anchoring bias.
• Pair the slider with a numeric tool when a formal verdict is required.

Visual parity is a subjective threshold that varies by context. A marketing hero image demands strict parity because the brand is the product; a blog thumbnail can tolerate minor compression artefacts without damaging the reader experience.

Set a tolerance policy before the comparison starts. For critical assets, declare that the slider must reveal zero visible differences; for secondary assets, define an acceptable noise floor based on the delivery format and the display size. This removes ambiguity from what is otherwise a judgement call made under time pressure.