画像差分とは？

画像差分は、画像の2つのバージョンをピクセル単位で比較し、異なる箇所をすべて示します。開発者はこれをビジュアルリグレッションテストに使用します。コード変更前のページのスクリーンショットと変更後に撮影したスクリーンショットを比較することで、意図しないずれ、欠落したアイコン、色の変更などを、2つのスクリーンショットを一見しただけでは同じに見える場合でも目立たせることができます。

ツールの説明

このツールは2つの画像を比較し、差分画像を描画します。差分は、1枚目の画像を薄く表示した背景上に赤色で示されます。異なるピクセル数を数え、近接する差分を領域としてまとめ、それらが占める面積を測定します。滑らかなテキストや図形の輪郭はアンチエイリアスとして検出され、カウントから除外されるため、少し異なるフォントレンダラーで撮影したスクリーンショットが変更として表示されることはありません。2つの画像上でスライダーをドラッグしたり、両方を同時にズームしたりすることもできます。

特徴

  • PNG、JPEG、WebP、GIF、BMP、AVIF画像を比較
  • 異なるピクセル数をカウントし、画像全体に占める割合として表示
  • 近接する差分を領域としてまとめ、差分画像上で各領域の輪郭を表示可能
  • アンチエイリアスされたピクセルをスキップし、別の色で表示。必要に応じてカウントすることも可能
  • 2つの色が異なると判定するために必要な色差のしきい値を調整可能
  • 暗くなったピクセル用の2つ目の色を任意で設定し、追加されたコンテンツと削除されたコンテンツを区別可能
  • 透明な背景上に差分のみを描画する差分のみモード
  • ピクセルを鮮明に保ったまま最大3200%までズームし、差分をPNG画像としてダウンロード
  • 両方の画像を同時にズームおよびパンできるスライダー表示。全画面モードにも対応
  • 画像を左上で揃えるか、2枚目の画像のサイズを変更することで、サイズの異なる画像も比較

仕組み

比較には、多くのビジュアルテストツールで使用されているオープンソースライブラリのpixelmatchを使用します。各ピクセルについて、目が知覚するのと同じように色相よりも明るさを重視するYIQ色空間で色の距離を測定します。距離がしきい値を超えると、そのピクセルは異なるものとしてカウントされます。pixelmatchはピクセルをカウントする前に、隣接するピクセルを確認し、アンチエイリアスされた輪郭の一部かどうかを判定します。このツールはファイルに保存されたピクセル値を読み取り、埋め込まれたカラープロファイルを無視するため、同じピクセルにデコードされる2つのファイルは必ず一致します。すべての処理はブラウザー内で実行され、画像がアップロードされることはありません。

ヒント

  • スクリーンショットでは、しきい値を0.1に設定します。JPEG圧縮によるノイズも含めてあらゆる変更を検出するには0に下げ、小さな色の変化を無視するには上げます。
  • JPEG画像を2回保存すると、わずかな差によって数千のピクセルが異なることがあります。結果でしきい値を超える差分がないと表示された場合、画像は同じように見えます。
  • 「暗くなったピクセルをマーク」をオンにすると、追加されたコンテンツと削除されたコンテンツを確認できます。明るい背景上のテキストは、表示された箇所で暗くなるためです。
  • GIFファイルでは、最初のフレームのみが比較されます。