画像比較と差分
2枚の画像を、前後スライダー、横並び、変化を赤で強調して不一致の割合を示すピクセル差分マップで比較します。
すべてブラウザ内で実行されます。データがアップロードされることはありません。
関連ツール
すべて表示画像比較とは？
2枚の画像を読み込んで、3通りの方法で比較します。一方をもう一方の上に重ねて見せるスライダー、横に並べる、変化したピクセルを赤で示す差分マップです。ツールは異なるピクセルを数えて不一致の割合を表示し、チャンネルごとの許容値を調整して、わずかな圧縮の違いを無視できます。
画像比較の使い方
- 画像 A（基準）と画像 B（比較対象）をドロップまたは選択します。
- スライダー、横に並べる、差分を切り替えます。
- 不一致の割合とピクセル数を確認します。
- JPEGのノイズのような小さな違いを無視するには、許容値を上げます。
例
Two 40×20 images that differ only in the bottom-right quadrant (white vs black), tolerance 0
25% of pixels differ (200 of 800 pixels)
画像比較を使うべき場面
デザイン、スクリーンショット、レンダリングの2つのバージョン間の変更の発見、圧縮アーティファクトの確認、簡単なビジュアルリグレッションの確認に使います。同じ位置のピクセルを比較するため、ずれたり回転したりした内容は完全に異なるものとして数えられます。知覚的または構造的な類似度の指標ではありません。
画像比較の仕組み
両方の画像はRGBAにデコードされます。サイズが異なる場合、画像Bは画像Aのサイズに再サンプリングされます（その旨が通知されます）。すべてのピクセルの組が比較され、R、G、B、またはアルファの差の絶対値が許容値を超えると、そのピクセルは不一致として数えられ、差分マップでは赤く塗られます。一致したピクセルは、画像Aの薄いグレースケールとして表示されます。不一致率 = 不一致のピクセル数 ÷ 総ピクセル数 × 100 です。
一般的な使用例
- 2つのUIスクリーンショットの間で何が変わったかの確認
- 元の写真と圧縮版の比較
- 再書き出ししたアセットが同一であることの検証
- スライダーによる編集前後の表示
セキュリティ注意事項
画像はブラウザ内でCanvas APIを使ってデコード、処理、エンコードされます。サーバーには何もアップロードされません。
よくある質問
画像のサイズが違う場合はどうなりますか？
比較する前に画像Bが画像Aに合わせてリサイズされ、警告が表示されます。正確な結果を得るには、同じ寸法の画像を比較してください。
許容値は何をしますか？
いずれかのチャンネルの差が許容値（0〜255）を超えたときだけ、ピクセルが異なると数えられます。非可逆圧縮のノイズを無視するには5〜20を使います。
透明度も数えられますか？
はい。アルファチャンネルは、色のチャンネルと同様に比較されます。