画像の差分比較
Image Diff
2枚の画像を画素単位で比べて変わった箇所を光らせ、体感差のスコアも出します。
同じはずの2枚のスクリーンショットと、本当に同じなのかという問いです。変わったピクセルの数だけでは答えになりません——アンチエイリアスは何千ピクセルも変えますが、それには意味がないからです。だからSSIMとDSSIMを並べて出し、差の見方を4通り用意しています。
「変更前」の画像を置いてください
ブラウザーがデコードできる形式なら何でも構いません。
「変更後」の画像を置いてください
ブラウザーがデコードできる形式なら何でも構いません。
使い方
前と後を置きます
大きさが違っても受け取ります。両方を和集合の大きさまで透明で広げるので、重なった部分は正しく比較され、重ならない部分は差として現れます。実際そのとおりだからです。
許容値を決めます
YIQで測るので、同じ大きさの色相の変化に対して、輝度の変化はおよそ2.5倍に数えられます。目がそう順位付けるからです。0では、どこか1つの符号値の違いでも不合格になります。
2種類の数字を一緒に読みます
2%のピクセルが変わってSSIMが0.999なら、アンチエイリアスです。2%でSSIMが0.94なら、何かが動いています。
小さなずれにはワイプを使います
2つの版を網膜上の同じ位置に置きます。1ピクセル未満のずれが見えるようになる唯一の方法です。並べて見比べるのに要る視線の跳躍を、目はそれだけの精度を保ったまま越えられません。
よくある質問
SSIMはいくつなら大丈夫ですか
0.99あたりを超えていれば、2枚は描画のノイズを挟んだ同じ絵です。0.95を下回れば、何かが実際に違います。万能のしきい値はありません。自分の工程の、良いと分かっている組と比べてください。
DSSIMがSSIMと違うのはなぜですか
DSSIMは同じ構造の比較をL*a*b*で、5つの尺度にわたって行います。だから色だけの変化も数えられ、ある拡大率での違いが別の拡大率の陰に隠れません。両者が食い違うところは、構造ではなく色の変化です。
見た目の回帰テストに使えますか
不合格の中身を見るためには使えます。4つの表示はそのためにあります。CIで比較そのものを回すなら、ブラウザのタブではなく、テストランナーの中に同じ計算を置いてください。
ここから渡せます
次の一手
このツールが出したものをそのまま受け取れる道具です。
画像トリミング
Image Cropper
自由な形か決まった比率で切り抜き、単色や透明の縁を自動で落とすこともできます。
PDF比較
PDF Compare
2つのPDFをテキストと描画されたピクセルの両方で比べ、追加・削除・移動を一覧にします。
PNG圧縮
PNG Compressor
パレットを量子化してdeflateストリームを書き直し、寸法を変えずにPNGを軽くします。
背景透過（切り抜き）
Background Remover
平坦な背景や単色の背景をOKLabでキーイングして透過PNGにし、縁はブラシで直せます。
EXIF情報の削除
EXIF Remover
画素には手を触れずに、カメラ・GPS・編集履歴のメタデータだけを写真から消します。
ファビコン生成
Favicon Generator
ICO・各サイズのPNG・Appleタッチアイコン・ウェブマニフェストを一式で作り、貼り付けるHTMLも添えます。