画像比較 — 2枚の画像の違いを検出
2枚の画像で異なる画素を見つけて印を付け、重ね合わせとスライダーでも表示
ブラウザー内で処理・アップロード不要
画像A（元の画像）
画像A（元の画像）
まず基準となる画像を追加します。JPG、PNG、WebP、GIF、BMPに対応し、Ctrl+Vでの貼り付けもできます。
画像B（変更後）
画像B（変更後）
変更後の画像を追加します。Aが入っていれば、貼り付け（Ctrl+V）はBに入ります。
0はごくわずかな色の違いも検出し、値を上げるほど似た色を同じとみなします。初期値の0.1でJPGによくある圧縮ノイズは無視されます。
オフのときは、違いのあるやわらかい輪郭の画素を黄色で表示し、件数には含めません。
2枚の画像を追加すると、すぐに比較が始まります。
どんなツールか
見た目がよく似た2枚の画像がどこで違うのかを、1画素単位で見つけるツールです。画像を切り替えて見比べても気づかないような文字の小さな修正、1ピクセルのずれ、色の変化を赤で示します。Webサイトの変更が意図どおりに表示されているかの確認、デザイナーが修正版で何を変えたかの把握、印刷の校正に使えます。差分の表示のほか、2枚を重ね合わせたり、ビフォーアフターのスライダーで分割表示したりもできます。
使い方
- 画像A（元の画像） に基準の画像を、画像B（変更後） に変更後の画像を入れます。スクリーンショットはCtrl+Vで貼り付けられ、Aが入っていれば次の貼り付けはBに入ります。
- 2枚がそろうとすぐに比較が始まり、違う画素の数と割合、変更範囲の位置が表示されます。
- 感度 を動かして、どの程度の小さな色の違いを無視するかを決めます。
- 表示 で「差分」「重ね合わせ」（Bの不透明度を調整）「スライダー」（左がA、右がB）を選びます。
- 差分PNGを保存 をクリックして結果をダウンロードします。
しくみ
- 画素の比較：同じ位置の色を、人の明るさの感じ方に沿ったYIQ色空間での距離で比べます。しきい値0はごくわずかな変化も検出し、1に近いほど寛容になります。初期値は0.1です。
- アンチエイリアス：周囲の画素から判断してやわらかい輪郭とみなした画素は黄色で描き、件数から除きます（任意）。
- 差分画像：変化のない部分は元の画像を薄いグレー（10%）で表示し、違う画素を赤で示します。
- サイズ：800万画素を超える場合は2枚を同じ比率で縮小して比較し、変更範囲の座標はAの元の画素に換算し直します。
- 比較エンジンはpixelmatch（ISCライセンス）です。
比較例
| A | B | 結果 |
|---|---|---|
| 変更前のスクリーンショット、1280×800 | ボタンの文言を変えた同じページ | ボタンの周りだけが赤、範囲の座標を表示 |
| 写真のPNG | 同じファイル | 「違いはありません」と表示 |
| バナー1200×600 | 1000×600に切り抜いたバナー | サイズそのままなら、切り取った幅200pxの部分がすべて差分 |
テキストの違いを比べるにはテキスト比較を、画像の一部を切り出してよく見たいときは画像切り抜きをお試しください。
よくある質問
サイズの違う画像も比較できますか？
できます。「BをAのサイズに合わせる」は同じ画面を別の解像度で保存した場合に、「サイズはそのまま、左上でそろえる」は切り抜いたり広げたりした画像に使います。サイズをそのままにした場合、片方の画像にしかない部分はすべて差分になります。
JPG画像だと違いが多すぎます。
JPGの圧縮は、目に見えないわずかな色の変化を残します。しきい値を0.1から0.2〜0.3程度に上げると、そのノイズを無視して本当の変更だけが残ります。
黄色の画素は何ですか？
文字や線のやわらかい輪郭（アンチエイリアス）の画素がわずかに違う箇所で、フォントの描画の違いにすぎないことがよくあります。初期設定では黄色で表示し、件数には含めません。オプションにチェックを入れると数えます。
どんな用途に使えますか？
Webサイトの変更前後のスクリーンショットの比較、デザイン修正版の変更箇所の確認、印刷の校正刷りと原稿の照合、間違い探しなどに使えます。
画像はアップロードされますか？
されません。2枚の画像はブラウザーの中だけで比較します。
