2 枚の画像を比較するということ

見た目が同じ 2 つのファイル。片方はクライアントが承認したほうです。もう片方のどこかが動いていて、何が動いたのかは誰も書き残していません。

2 枚を並べてじっと見るのは、2 ピクセルのずれや、1 段階だけ変わった色、いつのまにか少し短くなった文字列を見落とす方法です。人の目は顔を見分けるのは得意ですが、この作業はとても苦手です。

このツールが代わりに見ます。 2 枚を入れれば、違うピクセルをすべて塗って示します。左右に拭き取るように比べることも、片方をもう片方に重ねて切り替えることもできます。

3 つの表示、1 つでは足りないから

差分 — 変わったピクセルを、見逃しようのない色で塗ります。変わっていない部分は灰色の影として後ろに残ります。「どこが」に答える表示です。
スライダー — 2 枚をそのままの画質で表示し、つまみを左右にドラッグします。「実際どう見えるのか」に答える表示です。つまみを直接動かしても、位置スライダーを使ってもかまいません。
フェード — 片方からもう片方へ溶けるように切り替えます。「ずれ」を見つけるのはこの表示です。ブロック全体が 3 ピクセル下がっただけでも差分マップは一面が色で埋まりますが、フェードなら動いているのが見えます。

まず差分で変化を探し、それからスライダーに切り替えて中身を確かめる、という順番がおすすめです。

画像の下に数字が出ます。何 % のピクセルが違うのか、それが何個なのか。完全に同じファイルならそうはっきり表示します。「書き出し直したけれど、本当に何か変わったのか」——それこそが知りたいことである場合も多いはずです。

感度は、どれくらいの差を「違い」とみなすかを決めます。ふつうは真ん中のままで大丈夫です。JPEG の圧縮ノイズで画面全体が光ってしまうときは上げ、保存し直したときに入り込んだ 1 段階の色の変化を拾いたいときは下げてください。

2 枚のサイズが違う場合、重ね合わせられるように 2 枚目を 1 枚目に合わせて拡大縮小します。そのこともお知らせします。

その場合、差分マップの扱いには注意してください。拡大縮小はすべてのピクセルを計算し直すため、ほぼ全体が印されてしまい、マップからは何も分かりません。スライダーとフェードを使ってください。きちんと比べたいときは、先に画像サイズを変更で 2 枚を同じサイズにそろえてください。

2 枚ともあなたのブラウザの中、あなたの端末の上で読み込まれ、比較されます。サーバーには何も送られません。

このツールに限っては、それが見た目以上に大事です。人が比較したい画像とは、未公開のデザイン、秘密保持契約下のクライアント作業、社内の管理画面、医療や法律関係のスキャン、そして公開するつもりのなかったものが写り込んだスクリーンショットだからです。

この表示をダウンロードすると、いま画面に出ているもの（差分マップ、スライダーの位置、フェードの状態）がそのまま PNG で保存されます。人に送るのに便利です
左右を入れ替えは、どちらがどちらかを反転します。読み込む順番を間違えたときに
透明な PNG は透明のまま扱われます。後ろの市松模様はページの背景で、画像の一部ではありません
一辺が 8000 px を超えるような大きい画像は時間がかかります。すべてのピクセルを比較しているためです
比較しているのはピクセルであって、ファイルそのものではありません。ピクセルは同じでメタデータだけ違う 2 つのファイルは「同じ」と表示されます。バイト単位で確かめたいときはチェックサムをどうぞ
画像ではなく書類なら 2 つの PDF を比較があります