このツールについて
Image Diff は、ブラウザ内だけで 2 枚の画像をピクセル単位で比較し、どこが異なるかを正確にハイライトします。「変更前」のスクリーンショットやデザインモックアップを画像 A として、「変更後」のバージョン——新しいスクリーンショット、同じデザインの実装版、あるいは再書き出しされたコピー——を画像 B としてドロップします。2 枚のサイズが異なる場合、両方とも大きい方に合わせたサイズのキャンバスに配置されます。片方の画像しか覆っていない領域は差異として扱われます。これはサイズの変化自体が検出したい対象だからです。結果は差分画像として得られます。変化したすべてのピクセルが鮮やかなマゼンタで塗られた画像 A が再描画され、差異のあるピクセル数とその割合もリアルタイムで表示されます。
これは実に開発者向けのワークフローです。CSS やコンポーネントの変更前後に撮った 2 枚のスクリーンショットを比較して視覚的な回帰を発見したり、実装済みの UI を元のデザインモックアップとピクセル単位で照合したり、すでに一度書き出された画像に 2 回目の JPEG/WebP 圧縮が加えるわずかなブロックノイズやバンディングを見つけたりできます。感度しきい値は、あるピクセルを「異なる」と判定するために色の変化がどれだけ大きくなければならないかを制御します——値を低く（0 に近づけると）すると 1〜2 ビットの圧縮ノイズを含むほぼすべての変化を検出し、値を高くすると明らかに目に見える差異のみを検出します。これは同じ元画像から書き出された 2 つのファイルを比較する際に通常望まれる挙動です。何もアップロードされません。両方の画像は Canvas API を使ってお使いの端末上で直接デコード・比較され、ダウンロードする差分画像も同じ方法で生成されます。
よくある質問
2つの画像のサイズが異なる場合はどうなりますか？
両方の画像は、2つのうち大きい方に合わせたサイズの共通キャンバスに配置され、どちらか一方の画像だけがカバーする領域（もう一方が小さいため）は差分としてカウントされます——これにより、一方の画像をもう一方に合わせて静かに引き伸ばす（これは比較を歪め、そもそもサイズが異なるという事実を隠してしまう）のではなく、サイズの不一致が比較の一部として正しく表面化されます。
どの感度しきい値を使うべきですか？
低いしきい値は、わずかで微妙な違いも捉えます（圧縮アーティファクトや非常にわずかなレンダリングの変化を検出するのに便利）。一方、高いしきい値は明らかに異なるピクセルのみをフラグします（他は同一の2つの画像の間の軽微なアンチエイリアス/圧縮ノイズを無視しながら、移動した要素や異なるコンテンツなどの重要な視覚的変化を見つけるのに便利）。範囲の中間あたりから始めて、ノイズが多すぎる場合（上げる）か実際の違いを見逃している場合（下げる）に応じて調整してください。