ピクセル差分ビジュアライザー

ピクセル差分ビジュアライザーとは何ですか？

2つの画像を比較する方法

1. 1
   両方の画像をアップロード

   画像A（ベースライン）と画像B（比較したいバージョン）をドロップまたは選択します。同じ寸法を推奨します；サイズが一致しない場合は、画像Aに自動スケーリングされます。

2. 2
   差分モードを選択

   変更を強調表示するのがデフォルトです — 変更されたすべてのピクセルが選択したハイライトカラーで塗りつぶされます。横並びはA、B、および差分を1つのストリップにレンダリングします；オーバーレイはBを50%の不透明度でAの上に重ねます。

3. 3
   しきい値を調整

   しきい値スライダーを上にドラッグして、軽微な圧縮ノイズや小さなJPEGアーティファクトを無視します。圧縮された写真には5%が良い出発点です；0%はすべてのピクセルの差異をキャッチします。

4. 4
   変更統計を読む

   変更率は、しきい値を超えるピクセルの割合を示します — 回帰レビューやデザインQAに便利です。

5. 5
   差分PNGをダウンロード

   ダウンロードをクリックして、レンダリングされた差分をフル解像度で保存します。コードレビューの添付ファイルやバグレポートに便利です。

差分が計算される方法

各ピクセル位置pについて、画像AとBのチャネル（r、g、b）を使用します：
 
  diff(p) = |Ar - Br| + |Ag - Bg| + |Ab - Bb|
 
ピクセルは次の条件で異なると見なされます：
 
  diff(p) > (しきい値% × 765) / 100
 
ここで765 = 3 × 255は最大チャネル合計の差です。これは、
pixelmatchやresemble.jsのような画像差分ツールで使用されるL1距離メトリックと同じで、
チャネルごとの許容値ではなく、単一の調整可能なしきい値として表現されています。

参考文献： pixelmatch — ピクセルレベルの画像比較

例

一般的な使用ケース

• 視覚回帰テスト — UIのスクリーンショットが前のベースラインと一致することを確認します。
• デザインレビュー — デザイナーが2つのエクスポートの間で変更したピクセルを正確に確認します。
• 写真編集QA — 非破壊的な編集が意図した領域だけに触れたことを確認します。
• 2つの圧縮プリセットを比較し、実際にどれだけのピクセルが移動したかを定量化します。
• 一見同じに見える2つのスクリーンショット間のサブピクセルの不整合を特定します。
• ベースライン、現在、差分を横に並べた1枚の画像バグレポート添付ファイルを生成します。
• アセットパイプラインを監査します — 自動リサイズがノイズを導入していないことを確認します。

関連ツール

よくある質問