Uの創作部屋 · ツール一覧

IMAGE → DIFFERENCE

画像比較

変わったところを、
数字と色で見つける。

2枚の画像を比較し、差分がある部分を薄い赤で表示します。スクリーンショットの更新確認や、制作途中の画像の見比べに。画像はこの端末内で処理し、サーバーへ送信しません。

01

2枚の画像を選ぶ

まだ選択されていません
まだ選択されていません

PNG・JPEG・WebP / 1枚30MB・2,400万画素まで。アニメーションの比較には対応していません。

02

比較する

0なら小さな色の違いも差分です。値を上げるとJPEGの圧縮ノイズなどを除外しやすくなります。設定変更後は「比較する」を押してください。

左上をそろえて比較します。片方にしかない領域も差分に含めます。

TRY & UNDERSTAND

イラストで違いを探してみる

猫のいる作業部屋を描いた、1,536 × 1,024pxのAI生成イラストです。画像Bではマグカップと本の表紙の色を変えています。細かな色の揺らぎも含まれるため、サンプルでは許容値20を設定します。「サンプル2枚で試す」→「比較する」で、違う部分を確認してみてください。

画像A。猫のいる部屋。机の上に黄色いマグカップと緑の表紙の本がある。
画像A:変更前 PNGを保存 ↓
画像B。同じ部屋のマグカップが赤く、本の表紙が水色になったイラスト。
画像B:変更後 PNGを保存 ↓
実際に保存した差分画像。許容値20で差分になった部分に赤を30%重ねた結果。
差分:赤の濃さ30% 実出力PNGを保存 ↓
49,220画素 ÷ 1,572,864画素 × 100 ≈ 3.13%

掲載した差分画像は、許容値20・赤の濃さ30%で実際に比較・保存したものです。許容値0では微妙な色の違いも数えるため約99.83%になります。差分率は「意味がどれくらい違う」「画質がどれくらい悪い」という評価ではなく、比較した画素のうち、設定した許容値を超えた画素の割合です。文字1つの変更でも、画像全体が大きければ差分率は小さくなります。

使い方と、結果の読み方

  1. 比較元Aと比較先Bを選びます。同じ大きさ・同じ位置で撮ったスクリーンショットほど、変更箇所を見つけやすくなります。
  2. まず許容値0で比較し、薄い赤の場所と差分率を確認します。必要なら許容値を調整して比較し直します。
  3. 画像A・Bの切り替えで内容を見比べ、原寸表示で細部を確認します。必要な結果はPNGで保存してください。

差分率の計算

同じ座標の赤・緑・青の各値(0〜255)を比べ、いずれかの差が許容値より大きければ、その画素を差分として数えます。透明部分は白い背景に重ねた見た目で比較します。完全に透明な部分に隠れた色や、画像のメタデータは比較しません。

画像のサイズが違う場合

拡大して一方に合わせる処理や、位置の自動補正はせず、左上をそろえます。片方にしかない領域は、白に見えても差分です。両方に画像がない余白は比較画素数から除外します。切り抜き位置や撮影位置がずれていると、同じ内容でも広い範囲が赤くなることがあります。

大きな画像の比較

ブラウザの負荷を抑えるため、比較範囲が400万画素または長辺3,000pxを超える場合は、2枚とも同じ倍率で縮小して比較します。結果には縮小後の比較サイズを表示します。この場合の差分率は縮小後の画素に基づき、元画像の細かな違いは消えることがあります。「原寸」は比較に使用した画像の原寸です。

0%でも、ファイルが同じとは限りません

ファイル形式、撮影日時、圧縮方法などが違っても、読み出した画素が同じなら0%です。また、白い背景上で見た目が同じ透明度の違いや、許容値以下の色の違いは数えません。JPEGの保存し直しや文字のにじみが多く赤くなる場合は、許容値を少しずつ上げてください。

利用できる画像と注意点

通常の静止画PNG・JPEG・WebPを対象とします。アニメーションは全コマを比較できません。HDRや特殊な色空間の厳密な比較、印刷色の検査には向きません。端末の空きメモリによっては上限内でも処理できない場合があります。画像や結果は自動保存されず、タブを閉じると失われます。

画像を並べて1枚にまとめる → 動画から比較用のコマを切り出す →

第三者の画像や個人情報の取り扱いに配慮してご利用ください。プライバシーポリシー / 不具合を報告