🖼️ Image Comparator

📖 Overview

What is Image Comparator?

Image Comparator is a professional tool for analyzing and comparing images. Whether you need to detect differences between versions, verify image quality, or analyze visual changes, Image Comparator provides powerful analysis modes with precise statistical metrics.

Key Features

• Four Comparison Modes: Side-by-side, overlay, difference map, and dedicated statistics tab
• Statistical Analysis: Pixel-perfect match, similarity percentage, MSE, PSNR, SSIM, and pixel difference counts
• Synchronized Navigation: Zoom and pan controls work across both images
• Difference Detection: Highlight changes with adjustable sensitivity
• Export Capabilities: Save difference maps and detailed reports
• Flexible Input: Supports PNG, JPG, BMP, GIF, and TIFF formats

🚀 Getting Started

Quick Start Guide

1. Load Images
   Click "Browse" next to Image 1 and Image 2, or drag and drop images directly onto the interface.
2. Choose Comparison Mode
   Select from Side-by-Side, Overlay, or Difference Map in the controls panel.
3. Analyze Results
   View statistical metrics in the Analysis panel on the right.
4. Export (Optional)
   Save difference maps or generate detailed comparison reports.

🎯 Comparison Modes

Using Side-by-Side View

• Both images displayed in separate panels
• Zoom dropdown (25% - 200%) for precise zoom control
• Click and drag to pan around images
• Zoom and pan are synchronized between both images

Using Overlay Mode

• Images blended together in a single view
• Opacity slider controls transparency (0% = Image 1 only, 100% = Image 2 only)
• Useful for detecting alignment, registration, or color shifts
• Works best with images of identical dimensions

Using Difference Map

• Differences highlighted in red against grayscale background
• Threshold slider controls sensitivity (higher = more sensitive, showing more subtle differences)
• Perfect for quality control and change detection
• Export the difference map as an image for documentation

📋 Common Workflows

Workflow 1: Quality Verification

1. Load original image as Image 1
2. Load processed/compressed version as Image 2
3. Switch to Difference Map mode
4. Adjust threshold to highlight compression artifacts
5. Check PSNR metric (higher = better quality preservation)
6. Export difference map if documenting issues

Workflow 2: Design Iteration Review

1. Load previous design version as Image 1
2. Load new design version as Image 2
3. Use Side-by-Side view for overall comparison
4. Switch to Overlay mode to check alignment changes
5. Use Difference Map to identify all modified areas
6. Generate report for design review meeting

Workflow 3: Screenshot Validation

1. Load baseline screenshot as Image 1
2. Load current screenshot as Image 2
3. Set Difference threshold to 20-30 for UI elements
4. Check for unintended visual changes
5. View MSE metric (0 = identical)
6. Save difference map as visual proof

📊 Understanding Metrics

Mean Squared Error (MSE)

What it measures: Average squared difference between corresponding pixels.

Range: 0 to ∞ (lower is better)

Interpretation:

• 0 = Images are identical
• < 100 = Very similar images
• 100-1000 = Moderate differences
• > 1000 = Significant differences

Peak Signal-to-Noise Ratio (PSNR)

What it measures: Ratio between maximum possible pixel value and the MSE.

Range: 0 to ∞ (higher is better)

Interpretation:

• > 40 dB = Excellent quality, virtually identical
• 30-40 dB = Good quality, minor differences
• 20-30 dB = Acceptable quality, visible differences
• < 20 dB = Poor quality, major differences

Note: PSNR is infinite when images are identical.

Structural Similarity Index (SSIM)

What it measures: Perceptual similarity considering luminance, contrast, and structure.

Range: 0 to 1 (higher is better)

Interpretation:

• 1.0 = Perfect match
• 0.9-0.99 = Very similar
• 0.7-0.9 = Similar with noticeable differences
• < 0.7 = Significant structural differences

Note: Requires scikit-image library. If unavailable, SSIM will show "N/A".

💡 Tips & Best Practices

For Accurate Comparisons

• Use images of the same dimensions when possible
• Compare images in the same format (PNG to PNG, JPG to JPG)
• Ensure both images have the same color space (RGB vs. RGBA)
• For screenshots, use the same resolution and scale

Adjusting Difference Threshold

• Low (0-20): Shows all differences, including minor color variations
• Medium (20-50): Balanced - shows noticeable differences
• High (50-100): Shows only major structural changes

Overlay Opacity Guidelines

• 50%: Balanced blend, good for general alignment checks
• Sweep 0-100%: Move slider to see transitions and changes
• Near endpoints: Check individual image quality

🔧 Troubleshooting

Q: Images appear stretched or distorted in overlay mode

A: This occurs when images have different dimensions. The tool auto-resizes to match, which may distort aspect ratios. Use images of identical dimensions for best results.

Q: Difference map shows everything as red

A: Lower the threshold slider. A high threshold means only very different pixels are highlighted. Start at 30 and adjust.

Q: Can't drag images onto the interface

A: Ensure you're dragging image files (PNG, JPG, etc.) and not shortcuts or folders. Drop them directly on the file path fields, or the "Drop Image Here" frames.

Q: Zoom is too sensitive or not synchronized

A: The zoom works via mouse wheel and should be synchronized in side-by-side mode. If issues persist, try clicking "Reset" to restore default view.

Q: Exported difference map is blank

A: Generate the difference map first by selecting "Difference Map" mode and adjusting the threshold. Then use the export function.