home / skills / dkyazzentwatwa / chatgpt-skills / image-comparison-tool

image-comparison-tool skill

safe

This skill helps you compare images using SSIM, highlight pixel differences, and visualize side-by-side diffs for quick QA.

npx playbooks add skill dkyazzentwatwa/chatgpt-skills --skill image-comparison-tool

Review the files below or copy the command above to add this skill to your agents.

Files (3)

SKILL.md

788 B

---
name: image-comparison-tool
description: Compare images with SSIM similarity scoring, pixel difference highlighting, and side-by-side visualization.
---

# Image Comparison Tool

Compare images with similarity scoring and difference visualization.

## Features

- **SSIM Similarity**: Structural similarity index
- **Pixel Differences**: Highlight changed areas
- **Side-by-Side**: Visual comparison layout
- **Diff Heatmap**: Color-coded differences
- **Batch Comparison**: Compare multiple image pairs
- **Threshold Detection**: Find significant changes

## CLI Usage

```bash
python image_comparison.py --image1 before.jpg --image2 after.jpg --output diff.png
```

## Dependencies

- opencv-python>=4.8.0
- scikit-image>=0.21.0
- pillow>=10.0.0
- numpy>=1.24.0
- matplotlib>=3.7.0

Overview

This skill delivers precise image comparison capabilities using SSIM similarity scoring, pixel-level difference highlighting, and side-by-side visualizations. It is implemented in Python and designed for automated and manual inspection of visual changes. The tool supports batch comparisons, diff heatmaps, and configurable thresholds to flag meaningful differences.

How this skill works

It computes the Structural Similarity Index (SSIM) between image pairs to produce a normalized similarity score. The tool also calculates pixel-wise differences to generate highlighted overlays and a color-coded heatmap that shows where changes occurred. Outputs include a side-by-side composite, a standalone diff image, and numeric reports for integration into pipelines.

When to use it

Regression testing for UI snapshots or visual regressions in web and app development.
Automated quality checks in image processing or content pipelines.
Verifying before/after changes in image editing or restoration workflows.
Detecting unexpected modifications in security or surveillance frames.
Batch processing when comparing large sets of image pairs for drift detection.

Best practices

Preprocess images to the same dimensions and color space before comparison for consistent results.
Pick an SSIM threshold appropriate for your domain; start with 0.95 for UI regressions and adjust from there.
Use batch mode for automated CI pipelines and export numeric summaries for programmatic decisions.
Combine heatmap overlays with the side-by-side view to quickly validate both context and local changes.
Keep original and processed images archived to reproduce and audit comparisons.

Example use cases

CI visual regression: compare screenshots from test runs to baseline images and fail builds on low SSIM.
Content moderation: detect subtle edits between submitted and approved assets before publication.
Photo restoration QA: highlight pixels changed by restoration algorithms to verify improvement.
Surveillance change alerts: generate heatmaps showing movement or tampering between frames.
Mass comparison: run batch jobs to score thousands of image pairs and export CSV reports.

FAQ

What image formats are supported?

Common formats like JPEG, PNG, and BMP are supported via Pillow and OpenCV; ensure consistent encoding for best results.

How do I choose an SSIM threshold?

Start with 0.95 for minor UI changes, lower for tolerant checks. Tune using a labeled set of known changes to balance false positives and negatives.

Can it handle different image sizes?

Yes, but images should be resized or cropped to a common size before comparison to avoid skewed SSIM results.