Compare Images

Compare Images Online

Before and after slider, side by side, onion skin blend, or per-pixel difference highlighting. Synchronized zoom on both images. Nothing leaves your device.

Last updated: August 2026

4 Modes

Slider to Difference

Synced

Zoom on Both Images

Pixel Diff

Adjustable Sensitivity

Private

No Uploads

Before

Drop an image or click to choose

After

Drop an image or click to choose

How to compare two images

1

Add both images

Drop a Before and an After image. Nothing is uploaded.

2

Pick a mode

Slider, Side by Side, Onion Skin or Difference.

3

Adjust settings

Slider position, blend opacity, threshold or zoom.

4

Download

PNG, JPG or WebP, saves as a new file.

Four ways to look at the same two images

Sweep across the whole photo, glance at both at once, or let the tool point out exactly what changed.

Before and after slider

Drag anywhere on the image to reveal one photo underneath the other. Horizontal or vertical, with a customizable handle and divider line.

Side by side

Both images shown at once, split down the middle, for a quick overall glance rather than a detail sweep.

Onion skin blend

Layer the after image over the before image with adjustable opacity, good for checking alignment or a subtle color shift.

Difference highlighting

Computes a real per-pixel comparison and highlights exactly what changed, with an adjustable sensitivity threshold.

Synchronized zoom

Use the zoom slider to magnify a detail and both images stay locked together at the same magnification, centered. There's no scroll-to-zoom, by design, so the page keeps scrolling normally.

Download in three formats

Every mode exports as a real file, PNG, JPG or WebP, a composite image, a joined side by side image, or the difference map itself.

What you can do with this tool

Photo retouching before and after

Show a client exactly what a retouch changed with a clean slider reveal, instead of two separate images they have to flick between.

Product photography revisions

Compare a reshoot against the original to confirm lighting, framing or background changes landed the way they were meant to.

Compression quality comparison

Slide between the original and a compressed export to judge exactly how much quality was actually lost at a given setting.

Design iteration client review

Onion skin two design revisions on top of each other to spot subtle spacing, color or alignment shifts a side by side view would miss.

Verify an edit only changed what it should have

Run Difference mode after an edit to confirm nothing outside the intended area moved, a background element was not accidentally clipped.

Choosing a mode

Use Slider when

You want to sweep across the whole image and let the reveal itself do the explaining, the most intuitive option for showing someone else a change.

Use Side by Side when

You want both versions visible at the same time rather than having to sweep back and forth to remember what the original looked like.

Use Onion Skin when

You are checking alignment or a subtle shift, since layering both images makes small positional differences visible as a ghosting effect.

Use Difference when

You need a definitive, objective answer about which pixels actually changed, not just an impression from looking at the two images.

Why a pixel-aligned slider beats two loose images

The simplest way to compare two photos is to just place them next to each other, and that works fine for a general impression. It falls apart the moment the comparison needs to be precise, because your eye has to jump back and forth between two separate positions on the screen, re-locating the same detail in both images every time. A slider avoids that entirely by keeping both images pinned to the exact same position on screen and only changing which one is visible on each side of the divider. The same pixel of the photo stays in the same place on your screen the whole time, so any change jumps out the instant you sweep across it, rather than requiring you to mentally align two separate frames.

That same pixel alignment is why this tool always treats one image as the reference frame and fits the second image into it, rather than just stacking two arbitrarily sized images and hoping they line up. If the two photos are not the same size to begin with, no comparison mode can make them perfectly aligned by magic, and the tool is upfront about that with a note whenever it detects a mismatch, rather than silently distorting one image to paper over the difference.

What the difference threshold is actually measuring

Difference mode compares each pixel's red, green and blue channels between the two images and takes whichever channel changed the most. If that change is at or above the threshold you set, the pixel gets painted in the highlight color. If it falls below, it stays as a dimmed grayscale version of the original, there for context but not treated as a meaningful change. A very low threshold catches nearly everything, including the kind of tiny pixel-level shifts that ordinary JPEG recompression introduces even when nothing about the image actually changed on purpose. Raising the threshold filters that noise out and leaves only the differences large enough to matter, which is why the default sits at a moderate value rather than the most sensitive setting available.

Why Difference mode resizes the second image differently than every other mode

Every other mode in this tool fits the second image inside the first image's frame without changing its proportions, which is the right call when the goal is a fair visual look at both photos. Difference mode has a stricter requirement, every pixel in image A needs a corresponding pixel in image B to compare against, which is only possible if both images share the exact same width and height. So for that mode specifically, the second image is stretched to match rather than letterboxed, and if the two images started at different aspect ratios that stretching itself will show up as a difference across the whole frame. For the cleanest possible difference result, starting from two images that are already the same dimensions, using the resize tool first if needed, gives a far more meaningful result.

Common comparison mistakes

Trying to scroll over the canvas to zoom

Scrolling over the comparison does nothing on purpose, it's left alone so the page keeps scrolling normally. Use the zoom slider in the sidebar instead, it zooms centered on both images together.

Assuming the download is always PNG

The output format is selectable, PNG, JPG or WebP, each with its own tradeoffs. JPG and WebP get a quality slider, PNG is always lossless.

Reading too much into the live Difference percentage

The percentage shown while dragging the threshold is computed at a reduced preview resolution for smooth interaction. The number recalculates at full resolution once you download, so it can shift slightly from what you saw live.

Not accounting for stretching in Difference mode

Difference mode stretches the second image to match the first image's exact dimensions rather than fitting it proportionally. If the two source images have different aspect ratios, that stretching itself shows up as difference across the whole frame. Resize both images to the same dimensions first for a cleaner result.

Exporting a Difference result as JPG and losing the dimmed context

JPG has no alpha channel, so the semi-transparent dimmed backdrop that shows unchanged areas for context gets flattened onto white. Use PNG or WebP if that backdrop needs to stay distinguishable from a plain white background.

Why use ImgTweak?

Runs entirely in your browser
No uploads, ever
Four comparison modes in one tool
Real per-pixel difference calculation
Free forever, no account needed
Works on mobile as well as desktop

Frequently asked questions

Does this work if the two images are different sizes?

Yes, with one distinction. In the Slider, Onion Skin and Side by Side modes, the second image is fitted inside the first image's frame without distorting it, which can leave some padding if the aspect ratios differ. In Difference mode, the second image is stretched to exactly match the first image's dimensions instead, since comparing individual pixels only works if both images share the exact same pixel grid. A note appears on screen whenever the two images do not already match.

How does zoom work?

Zoom is controlled only by the zoom slider in the sidebar and is always centered on both images together. There is no scroll-to-zoom on the canvas, this is intentional so the page keeps scrolling normally when your cursor is over the comparison, and so dragging (already used to move the Slider divider) doesn't get overloaded with a second meaning.

What is the difference between this tool and the Image Hash Generator?

The Image Hash Generator answers a numeric question: are these two files identical, or roughly how similar are they, expressed as a hash and a bit distance. This tool answers a visual question: show me exactly where and how the two images differ, with a slider to sweep across the whole image or a difference map that highlights the changed regions directly. Use the hash generator for a quick yes or no on file integrity, and this tool when you actually need to see the change.

Can I compare more than two images at once?

This tool compares exactly two images at a time, which covers the vast majority of before and after use cases. For comparing many files against each other in bulk, the Batch mode on the Image Hash Generator is a better fit, since it produces a checksum table across any number of files at once.

What formats can I download the result in?

PNG, JPG or WebP. A quality slider appears for JPG and WebP, PNG is always lossless with no quality setting. If you export a Difference result as JPG, the dimmed backdrop that provides context around the highlighted areas gets flattened onto white, since JPG has no alpha channel.

Why does the difference percentage change slightly when I download versus what I saw live?

While you're adjusting the threshold or colors, Difference mode computes its preview at a reduced resolution so the dragging stays smooth even on large source images. At download time, the comparison is recalculated once at your images' full original resolution, which can shift the reported difference percentage slightly from what the live preview showed.

Does dragging the slider or adjusting the settings affect the original files?

No. Both images stay exactly as they were uploaded. The slider position, blend opacity and difference settings only change what is drawn on screen. Nothing is written back to the original files, and nothing is uploaded anywhere. Downloading creates a new, separate image.

Why does Difference mode show noise even on two photos that look identical?

Two photos can look identical to the eye while still differing at the byte and pixel level, most commonly from JPEG recompression, a slightly different export setting, or color profile handling. The sensitivity threshold controls how big a per-pixel difference has to be before it counts. If a comparison looks noisier than expected, raising the threshold usually clears out that kind of low-level compression artifact and leaves only the differences that actually matter.

Is my image uploaded to a server?

No. Every comparison mode, including the pixel difference calculation, runs entirely in your browser using the Canvas API. Your images never leave your device. You can disconnect from the internet after loading the page and the tool still works completely.

Ready to compare your images?

No sign-up. No uploads. Add both images above and download the result in seconds.