画像比較

画像差分チェッカー

同じ画像の 2 つのバージョンを比べて、変わったピクセルをすべて見つけます —— 目では絶対に気づかない違いも。

画像比較

☞ すべてブラウザ内で処理 — アップロードは一切ありません

2 枚の画像をここにドロップ

またはクリックして 2 枚まとめて選択 — JPG、PNG、WebP

ピクセル単位

2 枚の画像の間で何が変わったかを見つける

2 回書き出したスクリーンショット、修正前後の同じバナー、デザインカンプと実装、昨日と今日のレンダリング結果 —— 同じに見えても違っていることがあります。このツールは画像 A の全ピクセルを画像 B の同じ位置のピクセルと比べ、違うものを赤で示し、変化した範囲を枠で囲み、影響を受けたピクセル数を表示します。縮小表示でも、マス内のどれか 1 ピクセルでも違えばそのマス全体に印を付けるので、1 ピクセルだけの変更も見逃しません。

結果は 3 つの表示で読み取れます。「差分を強調」は薄くした A の上に変化を赤で示します。「差の絶対値」は各色がどれだけ変わったかを表し、同じ部分は黒く、変化した部分が光ります。画像 A と画像 B を切り替えると変化がその場でちらつき、人の目はこれに非常に敏感です。許容値を設定すると JPEG ノイズのような小さな違いを無視できます。2 枚ともブラウザ内で比較され、アップロードされることはありません。

3 ステップ

2 枚の画像を比較する方法

01

2 枚の画像を追加

JPG、PNG、WebP を 2 つまとめて選ぶか、1 枚ずつ追加します。1 枚目が A、2 枚目が B になります。

02

結果を確認

変わったピクセルは赤く表示されて枠で囲まれ、数と位置が下に表示されます。圧縮ノイズまで拾う場合は許容値を上げてください。

03

比較画像を保存

現在の表示を原寸の PNG でダウンロードし、不具合報告やデザインレビューに添付できます。

早わかり

画像差分チェッカーのよくある質問

画像のサイズが違う場合は?

左上を揃え、大きいほうのサイズで比較します。片方の画像しかない範囲はすべて違いとして数え、両方のサイズを注記します。拡大縮小した版を比べたい場合は、先にどちらかのサイズを合わせてください。

同じに見える 2 枚の写真がほぼ全面赤くなるのはなぜ?

どちらかが JPEG で保存し直された可能性が高く、その際に多くのピクセル値がわずかに変わります。許容値を 10〜20 に上げると、本当の変更だけが残ります。

許容値は何を測っていますか?

赤・緑・青・アルファの各チャンネルの差のうち最大のもので、0〜255 の範囲です。0 のときは、どれか 1 チャンネルが 1 段階でも変われば違うピクセルとして数えます。

透明なピクセルも比較されますか?

はい、透明度も含めて比較します。両方の画像で完全に透明なピクセルは、中に隠れた色の値が違っても同じとみなします。その色は決して見えないからです。

同じ場面を撮った別々の写真も比較できますか?

あまり役に立ちません。位置を厳密に比べるので、少し角度が違うだけでほぼ全面が違いになります。スクリーンショット、書き出し、修正、レンダリングなど、同じ画像の別バージョン向けのツールです。

画像はアップロードされますか?

いいえ。2 枚の画像を開くのも比較するのもすべてブラウザ内で行われ、どこにも送信されません。