無料Webツール

画像差分ヒートマップ

2枚の画像の画素差分をヒートマップとして可視化します。

入力と設定

使い方と確認ポイント

2枚の画像を同じ大きさへそろえてRGB画素差を計算し、差が大きい場所を色で強調したヒートマップPNGを作ります。平均差分の数値も同時に表示します。

  1. 画像Aと画像Bを選びます。
  2. 「実行」を押します。
  3. 平均差分とヒートマップを確認し、必要なら diff-heatmap.png を保存します。
比較サイズ
両画像の小さい方の幅・高さにそろえる
差分
各画素のR/G/B絶対差の平均
平均差分
全画素の差分平均
出力
PNGヒートマップ

ほぼ同じ画像なら平均差分は小さく、変更部分だけ色が強くなる

同じスクリーンショットの一部だけ文字色を変えた場合、変えた場所の差が強く出ます。完全一致に近いほど平均差分は0に近づきます。

画像サイズや縦横比が違う場合は、両方を共通サイズへ縮放してから比較します。その縮放自体が差分を生むことがあるため、厳密比較では先に同じ寸法・同じ構図へそろえてください。

平均差分は0〜255のRGB差の目安

各画素についてR・G・Bの絶対差を取り、その3値の平均を差分値にします。さらに全画素で平均した値が「平均差分」です。

赤みが強い場所ほど差が大きい

ヒートマップは差分値を色へ変換します。差が大きくなるほど赤成分が強まり、変更位置を目で追いやすくします。

異なるサイズは自動で同じ大きさへ描画

比較キャンバスは2枚のうち小さい方の幅と高さを使い、両画像全体をその寸法へ描画します。縦横比が違えば変形も起こり得ます。

アルファ値そのものは差分計算に含めない

差分式が見るのはR・G・Bです。透明度だけが変わったケースを厳密に検出する用途には、この指標だけでは不十分です。