画像差分チェッカー
2つの画像をアップロードし、ピクセル単位で正確な視覚的差分を確認できます。知覚的なYIQ比較とアンチエイリアスを考慮したハイライト機能を備え、すべてブラウザ上でローカルに処理されます。
🔒 ブラウザ内で完全に処理されます。ここに入力した内容はアップロードされません。
結果
CSSを調整して、何が動いたか正確に知りたいですか？QAのビジュアルリグレッションチェックのために2つのスクリーンショットを比較していますか？同じ写真の2つの書き出しバージョンの間で実際に何が変わったのか気になりませんか？2つの画像を行ったり来たりしながら目を細めて違いを探すのは時間がかかり、信頼性も低いものです。このツールは2つの画像を重ね合わせ、変化したすべてのピクセルを1枚の画像で表示します。
比較には、pixelmatchのようなツールで使われているアルゴリズムと同じ系統の、本格的なピクセル差分計算を用います。両方の画像の全ピクセルをRGBからYIQ色空間（Yは輝度、IとQはNTSCのクロミナンス軸）に変換し、2つのYIQポイント間のユークリッド距離を計算します。その距離を感度スライダーで設定した閾値と比較します。感度を上げれば微妙な色の変化も検出し、下げれば圧縮ノイズを無視して明らかな変化だけを対象にできます。
単純なピクセル単位の比較では、アンチエイリアス処理されたすべてのエッジを、実際には意味のある変化がなくても「異なる」と判定してしまいます。なぜなら、スムージングによって境界付近のいくつかのピクセルの色合いがわずかにずれるからです。このツールは両方の画像に対して本格的なアンチエイリアス・ヒューリスティックを実行します。ピクセルは、スムージングのグラデーション内にない場合にのみ、真の差分として扱われます。具体的には、どちらかの元画像における自身の3×3近傍内に、自身より明るいピクセルと暗いピクセルの両方が元々存在しない場合です。これがアンチエイリアスでスムージングされたエッジの特徴であり、実際のコンテンツの変化ではありません。
画像Aと画像Bをアップロードし、必要に応じて感度を調整して「実行」を押します。すると、異なるピクセルの正確な割合と、実際の変化をすべて明るいマゼンタで元画像の上にハイライトした差分画像が得られます。これをダウンロードして、バグレポートやQAノートにそのまま添付できます。両方の画像は同じサイズである必要があります。異なる場合、ツールは片方をトリミングしたり引き伸ばしたりせず、その旨を明示します。いかなる時点でも、データがブラウザの外に出ることはありません。