画像差分チェッカー

CSS 調整をリリースしましたが、何が変更されたかを正確に知りたいですか? QA の視覚的回帰チェックのために 2 つのスクリーンショットを比較しますか?同じ写真をエクスポートした 2 つのバージョン間で実際に何が変わったのか疑問に思いませんか? 2 つの画像を前後にスクロールし、相違点を目を細めて探すのは遅く、信頼性がありません。このツールは 2 つの画像を重ね合わせ、1 つの画像内で変更されたすべてのピクセルを表示します。

比較は実際のピクセル差分計算であり、pixelmatch などのツールで使用されるものと同じアルゴリズム ファミリーです。両方の画像のすべてのピクセルが RGB から YIQ 色空間 (Y = 輝度、I および Q = NTSC 色軸) に変換され、2 つの YIQ ポイント間のユークリッド距離が計算されます。その距離は、感度スライダーで設定されたしきい値と比較されます。感度を上げると微妙な色の変化が捉えられ、感度を下げると圧縮ノイズが無視され、明らかな変化のみが考慮されます。

単純なピクセルごとの比較では、意味のある変化が何もない場合でも、すべてのアンチエイリアス処理されたエッジが「異なる」ものとして強調表示されます。これは、スムージングによって少数の境界ピクセルが数階調ずつシフトされるためです。このツールは、両方の画像に対して実際のアンチエイリアシング ヒューリスティックを実行します。ピクセルは、平滑化グラデーション内にない場合にのみ、真の差異として扱われます。具体的には、どちらかのソース画像の 3x3 近傍に、それ自体よりも明るいピクセルと暗いピクセルの両方がまだ含まれていない場合です。これは、実際のコンテンツではなく、AA で平滑化されたエッジの指紋です。

画像 A と画像 B をアップロードし、必要に応じて感度を調整し、実行を押します。異なるピクセルの正確なパーセンテージと、実際のすべての変更を示す差分画像が、元の薄暗いバージョンの上に明るいマゼンタで強調表示されて表示されます。これをダウンロードして、バグ レポートまたは QA ノートに直接添付してください。両方の画像は同じ寸法を共有する必要があります。そうでない場合、ツールはそれらの 1 つを黙って切り取ったり引き伸ばしたりするのではなく、明確に通知します。どの時点でもブラウザから何も離れることはありません。