画像比較ツール

画像比較ツールでできること（JPG・PNG・WebPの差分抽出）

変わったピクセルだけを色で塗り分けて表示する

2枚の画像を重ね、色が変わった画素だけをマゼンタで塗ります。変わらなかった部分は淡く敷くので、どこが差し替わったのかが一目で分かります。差分の画素数と、重なった範囲に占める割合も同時に出ます。「並べて」「重ねてスライダー」「切り替え」の表示に切り替えて見比べることもできます。

対応している画像形式と、比較できない組み合わせ

JPG（.jpg / .jpeg）・PNG（.png）・WebP（.webp）に対応し、形式をまたいだ比較もできます。1辺が4000pxを超える画像は縮めてから比べます。動画・PDF・GIFアニメは対象外です。

サイズが違う写真を比較したときの扱い

縦横のピクセル数が違う2枚は、両方を収める大きさを比較範囲にします。片方にしか無い領域は灰色の斜線で示し（差分としては数えません）、寸法が違うことも画面に出ます。

2枚の画像を比較して差分を見つける3ステップ

1. 変更前・変更後の画像をまとめてドロップする「選ぶ」の段で、2枚の画像を同時に選ぶかドロップします。ファイルの更新日時から、古い方を変更前・新しい方を変更後に振り分けます。逆だったときは「変更前と変更後を入れ替える」で直せます。
2. しきい値を調整してノイズと本当の違いを分ける「結果を見る」の段で、写真やJPGは保存し直すだけで細かな色ずれが乗ります。全面が差分になってしまうときは「許容誤差（しきい値）」を少し上げて、見たい違いだけが残る位置を探してください。全体が少しずれているだけの2枚は「ずれを自動で補正する」で位置を合わせてから比べられます。
3. 差分ハイライトをPNG画像として保存する「差分ハイライト」の表示で「差分画像をダウンロード」を押すと、重ね絵をPNGとして保存できます。修正依頼や確認の共有に、どこが変わったかを塗った1枚をそのまま添えられます。

画像の差分抽出が役に立つ場面（デザイン確認・資料の版違い）

デザインカンプの修正前後をピクセル単位で突き合わせる

修正版が届いたとき、依頼した箇所だけが変わっているか、意図せず別の要素まで動いていないかを、目で追わずに確かめられます。

スクリーンショットを見比べて表示崩れを見つける

更新の前後で同じ画面を撮っておけば、文字の位置や余白のずれといった見落としやすい崩れを塗り分けで拾えます。

チラシ・印刷物の差し替え版を照合する

料金や日付を直した版と旧版を重ね、直したはずの箇所がすべて反映されているか、余計な箇所が変わっていないかを刷る前に確かめられます。

画像比較ツールのよくある質問

縦横のピクセル数が違う2枚でも比較できますか？

比較できます。2枚のうち大きい方の幅と高さを比較範囲にし、片方にしか無い領域は灰色の斜線で示して「比べられなかった画素数」として別に数えます。小さい方に合わせて切り落とすと、下に一行足されたような変更が見えなくなるためです。

比較した画像はサーバーにアップロードされますか？

されません。読み込みも比較も結果の書き出しも、すべてお使いのブラウザの中だけで行います。画像がネットワークへ出ることはないため、社外秘の資料やデザイン案でも安心して比べられます。

対応している画像形式（JPG・PNG・WebP）を教えてください

JPG（.jpg / .jpeg）・PNG（.png）・WebP（.webp）に対応しています。形式が違う2枚（たとえばPNGとJPG）を比べることもできます。透過のあるPNGは、透明度の違いも差分として検出します。

しきい値（許容誤差）は何を変えるための設定ですか？

どこまでの色の違いを「同じ」とみなすかの目盛りです。0にすると1段の違いも差分として拾い、上げるほど細かな違いを無視します。JPGは保存し直すだけで細かなノイズが乗るため、写真を比べて全面が反応してしまうときは少し上げてください。

差分のハイライト結果は画像として保存できますか？

できます。「差分ハイライト」の表示で「差分画像をダウンロード」を押すと、重ね絵をPNGとして保存できます。ファイル名は、変更後の画像名の後ろに -diff が付いた形になります。