Skip to main content
Bethemesh
Images & graphics

Image comparator

Load two images: compare them with a slider or side by side, or show changed pixels in red with their percentage, locally.

Embed this widget

Customize the result, check the live preview, then copy the code.

Preview

Embed code type

Code to copy

Responsive and automatically resized by Bethemesh.

Image
No image loaded

Drop an image here

Add exactly two images to compare. Select them together or add the second after the first.

Need more editing options?

Use multiple editing tools in one workspace, with your open file and its current edits.

Open the full editor

Was this tool useful?

How does this tool work?

Two versions of the same image often look so alike that you can no longer see what changed: a corrected mock-up, a screenshot before and after an update, a retouched or recompressed photo. This comparator shows them with a before/after slider, side by side, or highlights the pixels that differ in red with their percentage, without uploading the images.

Add exactly two PNG, JPEG or WebP images, selecting them together or one after the other; the first becomes "Before" and the second "After". Before / after overlays both images with a vertical divider you can drag, and Side by side places them left and right. Zoom helps inspect the details.

Differences compares the two images pixel by pixel. A pixel is marked red when one of its channels (red, green, blue or transparency) differs by more than 32 levels out of 255; the other pixels are shown in light grey from the first image, to keep the context. The threshold avoids flagging JPEG compression noise.

The result shows the percentage and number of differing pixels. If the two images are not the same size, the second is scaled to the size of the first before the calculation, and a message says so. Click Differences again or another view to return to the images.

How to use this tool

  1. Add both images

    Select the original, then the modified version, together or one after the other.

  2. Choose the view

    Before / after for the slider, Side by side, or Differences to highlight changed pixels.

  3. Inspect the differences

    Zoom into the flagged areas and read the percentage of differing pixels.

Detecting differences

Each pixel of the second image is compared with the pixel at the same position in the first.

Pixel difference

d = max(|ΔR|, |ΔG|, |ΔB|, |ΔA|) > 32

The pixel counts as different when the largest channel difference exceeds 32 out of 255.

Share of differing pixels

p = n_diff ÷ (W × H) × 100

Computed at the size of the first image.

ΔR, ΔG, ΔB, ΔA
differences of the red, green, blue and alpha channels between the two images
n_diff
number of pixels marked red
W, H
width and height of the first image

Use cases

Review a corrected mock-up

Spot at once what moved between two versions of a screen or a design.

Check for a visual regression

Compare a screenshot before and after an update to find the changed button or text.

Judge a retouch or compression

Use the slider to see whether an optimised photo lost detail compared with the original.

Examples

Changed button on a screenshot

200 × 50 = 10,000 changed pixels out of 1,280 × 720 = 921,600, i.e. 1.09%. The rest of the screen is shown in light grey.

Input

Two 1,280 × 720 px screenshots; only a 200 × 50 px button changes colour

Result

Differences view: the button shows in red; "1.09% of pixels differ (10,000 of 921,600)"

Two images of different sizes

The 16:9 ratio is the same, so nothing is distorted; edges may still show red because of the smoothing applied when enlarging.

Input

Original at 1,920 × 1,080 px and an export at 1,280 × 720 px

Result

The second image is scaled to 1,920 × 1,080 px before the comparison, with a message saying so

Tips and best practices

  • Always put the original first: the Differences view uses its size and its grey tones as the background.
  • To compare two exports, keep the same dimensions: rescaling creates differences along every edge.
  • Use the Before / after slider to judge a colour retouch, and Differences to find a localised change.
  • A small percentage on a photo recompressed as JPEG is normal: compression slightly changes thousands of pixels.

Sources and references

Frequently asked questions

How many images can I compare?

Exactly two. If you select only one, the tool waits for the second; with more than two, it asks you to start again.

How are differences detected?

Each pixel is compared with the pixel at the same place in the other image. It is marked red if the red, green, blue or alpha channel differs by more than 32 out of 255.

Must the images be the same size?

No, but it is better. The second is scaled to the size of the first; if the proportions differ, it is distorted and many pixels will show as different.

Can I adjust the sensitivity?

Not in this version: the threshold is fixed at 32 levels, enough to ignore compression noise while still catching a change of colour or text.

Can I download the differences image?

No, the comparator is meant for on-screen inspection. Take a screenshot of the Differences view if you need to share it.

Are my images uploaded to a server?

No. Display and difference calculation happen in your browser.

Related tools

Keep going with these tools

Tools similar or complementary to this one.

Similar tools

Image Editor

Crop, resize, add captions or watermarks, apply effects, and optimize an image in one editor.

Images & graphicsFeaturedUse this tool

Image optimizer

Lighten an image by setting its quality or aiming for a size in KB, with the final size shown before download.

Images & graphicsFeaturedUse this tool

Convert and compress an image

Convert an image to PNG, JPEG, or WebP and adjust output quality before download.

Images & graphicsFeaturedUse this tool

Read next

GuideBest practicesBeginner

Image Metadata: Read It, Keep It, or Remove It?

Understand EXIF, GPS, XMP, IPTC, ICC profiles, rights information, and how to manage image metadata for privacy, publishing, and Web performance.

31 August 202613 min
TutorialBest practicesBeginner

Optimize images for the Web without losing quality

Resize, compress and choose between WebP, AVIF and other formats with a practical workflow that reduces file size without unnecessary visual loss.

30 August 20264 min