Image Comparison Tool

Image Compare Tool: Visually Diff Two Images Side by Side

Comparing two images "” whether they are design mockups versus implementations, before/after edits, different compression settings, or two versions of a photograph "” is a task developers, designers, photographers, and QA testers face regularly. Our Image Compare tool provides an interactive slider-based comparison, a side-by-side view, and pixel-level difference analysis so you can quickly identify what changed between two images.

Visual comparison is harder than it sounds. The human eye naturally adapts to context: when viewing images separately, subtle color shifts, sharpness changes, or compression artifacts become nearly invisible. But when two images are displayed with a movable split line between them, even a 5% brightness change becomes immediately obvious. Overlaying the pixel difference as a heatmap surfaces changes that neither side-by-side nor overlay views would reveal. This tool combines all three approaches.

Use Cases for Image Comparison

Design QA and Pixel Regression Testing

Frontend development teams use image comparison extensively for visual regression testing "” automatically comparing screenshots of the current build against a baseline to detect unintended UI changes. A padding change, a font weight difference, or a color shift in a brand CSS variable can affect dozens of components. Automated visual regression tools like Percy, Chromatic, and Playwright's screenshot testing use pixel-diffing algorithms to detect these changes. Our manual comparison tool serves the same purpose when you need to investigate a specific component or page.

Image Compression and Format Comparison

When optimizing images for the web, you must balance file size against visual quality. Converting a JPEG to WebP at quality 80 might reduce file size by 40% "” but does it introduce visible artifacts? Comparing the original and compressed version at full resolution with the split slider reveals compression artifacts, banding, and detail loss that are invisible in thumbnails. This is especially valuable for evaluating AVIF vs WebP vs JPEG quality at equivalent file sizes.

Photo Editing Before/After

Photographers and retouchers use before/after comparison to evaluate the impact of color grading, retouching, sharpening, and noise reduction. The slider interface is the standard UI for this purpose, popularized by tools like Lightroom's before/after split view and countless photography portfolio websites.

A/B Testing Design Variants

Product designers comparing two button styles, color schemes, or layout variants benefit from direct comparison. Overlaying two designs with the split slider reveals how size, spacing, and visual weight differ "” more accurately than viewing them in separate browser tabs.

Scientific and Medical Imaging

Medical professionals, scientists, and researchers use image comparison for before/after treatment photos, microscopy comparisons, satellite imagery change detection, and CT/MRI scan comparison. Pixel-level difference maps are particularly valuable for quantifying change.

How Pixel Difference Algorithms Work

Computing the visual difference between two images goes beyond simple pixel-by-pixel subtraction. Several algorithms are used in practice:

Raw Pixel Difference (Delta E)

The simplest approach: subtract the RGB values of each corresponding pixel pair and sum the differences. A pixel in image A with RGB(200, 100, 50) compared to the same position in image B with RGB(210, 95, 55) has differences of 10, -5, and 5. The total difference can be expressed as the Euclidean distance in RGB color space: sqrt(10² + 5² + 5²) ≈ 12.2. This raw distance is easy to compute but does not match human perception "” humans are more sensitive to green channel changes than red or blue.

Perceptual Difference (SSIM)

The Structural Similarity Index Measure (SSIM) compares images by analyzing luminance, contrast, and structure "” properties that correlate with how humans perceive image quality. SSIM produces values from -1 (completely dissimilar) to 1 (identical). A score above 0.95 typically indicates visually imperceptible differences; below 0.8 means visible degradation. SSIM is the industry standard metric for image quality assessment and is used by video codecs, image compression benchmarks, and ML model evaluation.

Pixelmatch Algorithm

Pixelmatch, used by many visual regression testing tools, compares images anti-aliasing-aware. It first checks if pixels differ significantly using a threshold parameter. For borderline pixels near edges, it checks surrounding pixels to determine if the difference is due to anti-aliasing (which should be ignored) or genuine content change (which should be flagged). This makes it significantly more useful for UI screenshots than raw pixel comparison, which would flag every anti-aliased edge as a change.

Perceptual Hash (pHash) Similarity

For determining whether two images are "the same" at a high level "” ignoring minor rescaling, recompression, or color adjustments "” perceptual hashing is the standard approach. A perceptual hash generates a compact binary fingerprint of an image based on its DCT (Discrete Cosine Transform) frequency components. Two similar images produce similar hash values; the Hamming distance between hashes correlates with visual similarity. pHash is used for duplicate detection, reverse image search, and content-based image retrieval.

The Split Slider Interface

The split comparison slider is the most intuitive interface for image comparison. A vertical (or horizontal) divider separates the two images; dragging the divider reveals more of one image or the other. This design was popularized by Google Earth's historical imagery comparison, Wikipedia's image comparison templates, and photography before/after showcases.

Implementing a split slider requires two absolutely-positioned images in a container with overflow hidden, with a draggable divider that controls the clip width of the top image:

/* CSS */
.compare-container {
  position: relative;
  overflow: hidden;
}
.image-before {
  position: absolute;
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
}
.divider {
  position: absolute;
  left: var(--split);
  cursor: ew-resize;
}

JavaScript updates the --split CSS custom property as the user drags, giving smooth 60fps updates using the CSS engine rather than JavaScript layout calculations.

Overlay and Difference Views

Beyond the split slider, two other comparison modes provide different insights:

Overlay / Onion Skin

Blending both images at 50% opacity reveals differences as ghosting or haloing effects. This is the "onion skin" technique used in animation to compare consecutive frames. For design comparison, overlay mode makes alignment differences immediately visible "” a 2px shift in a button creates a double-image ghost effect.

Difference / XOR View

Computing the absolute pixel difference between images and amplifying it produces a difference map. Identical pixels appear black; changed pixels appear in proportion to their change magnitude. A small brightness change produces a dark gray difference pixel; a large content change produces a bright white pixel. This view is invaluable for finding subtle changes invisible in normal comparison modes. Many image comparison tools apply a color tint to the difference map "” red for significant differences, yellow for minor "” to create an intuitive heatmap.

Comparing Images Programmatically

For automated testing and CI pipelines, several libraries provide programmatic image comparison:

Pixelmatch (JavaScript/Node.js)

import { PNG } from 'pngjs';
import pixelmatch from 'pixelmatch';
import fs from 'fs';

const img1 = PNG.sync.read(fs.readFileSync('before.png'));
const img2 = PNG.sync.read(fs.readFileSync('after.png'));
const { width, height } = img1;
const diff = new PNG({ width, height });

const numDiffPixels = pixelmatch(
  img1.data, img2.data, diff.data,
  width, height,
  { threshold: 0.1 }
);

console.log(`Different pixels: ${numDiffPixels}`);
fs.writeFileSync('diff.png', PNG.sync.write(diff));

ImageMagick CLI

# Generate visual difference image
convert before.png after.png -metric SSIM \
  -compare diff.png 2>&1

# Get SSIM score
convert before.png after.png -metric SSIM -compare -format "%[distortion]" info:

PIL/Pillow (Python)

from PIL import Image, ImageChops
import numpy as np

img1 = Image.open('before.png').convert('RGB')
img2 = Image.open('after.png').convert('RGB')

diff = ImageChops.difference(img1, img2)
arr = np.array(diff)
print(f'Max diff: {arr.max()}')
print(f'Mean diff: {arr.mean():.2f}')
diff.save('diff.png')

Playwright Visual Testing

import { test, expect } from '@playwright/test';

test('homepage visual regression', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveScreenshot('homepage.png', {
    maxDiffPixelRatio: 0.02 // Allow up to 2% pixel difference
  });
});

Image Comparison in Design Systems

Modern design systems increasingly use visual regression testing as a core part of their CI/CD pipeline. Tools like Storybook's Chromatic integration automatically capture screenshots of every component story and compare them against a baseline after each pull request. Changes require explicit approval in a UI review workflow before they can be merged.

This approach transforms visual consistency from a manual QA task into an automated, auditable process. Designers can review only the visual changes in each PR, filtered to only the stories that changed. This eliminates the common problem of developers making "safe" CSS changes that unintentionally affect dozens of components they didn't test.

Best Practices for Image Comparison in Testing

• Set appropriate thresholds: pixel-perfect comparison fails on anti-aliased text with subpixel rendering differences across platforms. Use a threshold of 0.1-0.2 for UI screenshots and 0.0 for exact binary comparison.
• Mask dynamic content: dates, times, user avatars, and ads change between screenshots. Mask these regions to prevent false positives.
• Normalize viewport and scale: ensure both screenshots are taken at identical viewport dimensions and device pixel ratios. A 1440px screenshot compared to a 1280px screenshot will produce all-different results despite identical content.
• Wait for animations to complete: screenshot CSS animations mid-transition. Use prefers-reduced-motion in tests or wait for animations to end.
• Store baselines in version control: baseline screenshots should live in your git repository, updated intentionally via a deliberate review workflow, not automatically on every push.