画像の差分比較

機能

• 2 枚の画像を 1 ピクセルずつ比較し、差分画像を 1 枚出力
• しきい値（0〜255）を調整でき、それ未満の差は無視
• アンチエイリアスによる孤立画素を無視し、別に数えられます
• 暗くなった画素と明るくなった画素を別々に色分け（色は指定可能）
• 差分だけを描くときは透明背景の PNG。元の画像に重ねられます
• 1× / 2× / 4× で拡大して確認（最近傍なので輪郭がぼけません）
• サイズが違う 2 枚は黙って左上に合わせず、エラーで止まります
• カードに差分画素数・全画素数・割合を表示
• すべてブラウザー内で完結し、画像はアップロードされません

使い方

1. ちょうど 2 枚の画像を選びます
2. 必要に応じてしきい値・色・拡大倍率を調整します
3. 差分画像と、カードに表示される変化率を確認します

よくある質問

なぜサイズが同じでないといけないのですか？

差分比較は画素どうしの対応だからです。A の (100, 50) と B の (100, 50) を比べます。サイズが違うと対応関係がありません。左上に詰めて重ねることは技術上可能ですが、はみ出した部分が丸ごと「B だけにある」と判定されて色が付き、出てくる「90%」は探したい問題と無関係になります —— しかも見た目は完全にもっともらしいので、エラーよりずっと気付きにくいのです。だからここではエラーで止めます。先に切り揃えてください。

「アンチエイリアスを無視」は何を無視するのですか？

判定は向きの一致です。本当に変化した画素は、上下左右のどれかが同じ向きに変化しています（支配的なチャンネルと符号が同じ）。アンチエイリアスや再サンプリングによる差は孤立しており、同じ向きの隣がありません。 したがって、まとまった変化や線状の変化は必ず同じ向きの隣を持ち、すべて残します。孤立した 1 画素だけが違う場合はアンチエイリアスやノイズとみなし、無視して件数を別に表示します。スイッチを切ればこの絞り込みは行われず、しきい値を超えた画素はすべて差分になります。

変化率はどう計算していますか？

分母は全画素数（幅 × 高さ）、分子は「しきい値」と（任意の）「アンチエイリアス除外」を通った後に残った差分画素数です。パーセントで小数 2 桁まで表示します。カードには分子と分母も並べて出すので（例：1200 / 2400000 px）、割合の出どころが分かります。拡大倍率はこの比率に影響しません —— 変わるのは出力画像の大きさだけです。

透明背景の差分画像はどう使いますか？

ダウンロードして 1 枚目の画像に重ねてください（多くのビューアーやデザインツールがレイヤー合成に対応しています）。差分のある画素だけに色が付き、それ以外は完全に透明なので、どこが変わったか一目で分かります。元の画像と合成した結果を直接見たいときは「差分だけを描く」を切ってください —— 差分が 1 枚目の画像に直接描かれます。