画像比較ツール
2枚の画像を無料で比較できます。ビフォーアフターのスライダー、横並び、重ねて透過、変わったピクセルを赤で示す差分表示から選べます。ブラウザ内で処理するのでアップロードは不要で、登録もいりません。
2枚まとめてドロップするか貼り付けると、両方に入ります。
画像は端末の外に出ません。
2 枚の画像を比較する手順
- 「変更前」と「変更後」でそれぞれ「画像を選択」をクリックします。2 枚まとめてドロップするか貼り付けると、両方に一度に入ります。PNG、JPG、WebP、HEIC に対応しています。
- 表示方法を「スライダー」「横に並べる」「重ねて透過」「差分」から選びます。スライダーでは、線をドラッグするか矢印キーで動かします。
- サイズが違う画像は「幅を合わせる」か「原寸」を選びます。「重ねて透過」では変更後の不透明度を、「差分」では許容範囲を調整すると、わずかな色の差を無視できます。
- 「PNGをダウンロード」で、いま表示している比較を 1 枚の画像として保存します。「入れ替え」で左右を入れ替え、「最初からやり直す」で両方の画像を外せます。
どの表示方法を使えばいい？
スライダーは、ビフォーアフターのスクリーンショットを見せる定番の方法です。線の左に変更前、右に変更後の画像が表示されます。線を左右に動かすと、レイアウトのずれやトリミング、色の変化がすぐにわかります。「重ねて透過」では変更後の画像を変更前の上に重ねるので、位置が変わった要素は二重に見えます。
「差分」を使えば、違いを自分で探す必要はありません。すべてのピクセルを比べ、変わったピクセルを薄いグレーの画像の上に赤で示し、変わったピクセル数と、それをすべて含む最小の範囲を表示します。ピクセル単位のスクリーンショット比較なら、少しずれたアイコンや 1 語だけの文言変更など、目では見落としやすい違いも拾えます。
同じ内容を写していても、JPG 同士がぴったり一致することはほとんどありません。非可逆圧縮では、保存するたびに色がわずかに変わるためです。初期設定の許容範囲 10% は、こうしたノイズを無視します。0% にすると違うピクセルをすべて数え、50% に近づけるほどはっきりした変化だけが残ります。
開発チームは同じチェックをビジュアルリグレッションテストとして自動化し、リリースのたびに新しいスクリーンショットを承認済みのものと比べています。1 回だけ確認したいなら、スクリーンショット 2 枚とこのページで十分です。2 枚がうまく重ならないときは、スクリーンショット解像度チェッカーでそれぞれのピクセルサイズと Retina の倍率を確認できます。
よくある質問
この画像比較ツールは無料ですか？
はい。登録は不要で、透かしも入りません。何組でも比較できます。
画像はアップロードされますか？
いいえ。ブラウザが 2 枚の画像を読み込み、端末の中で比較します。サーバーには何も送信されず、タブを閉じると画像も消えます。
サイズの違う画像も比較できますか？
はい。「幅を合わせる」では変更後の画像を変更前の幅に合わせて拡大・縮小するので、Retina のスクリーンショットと通常のスクリーンショットを重ねられます。「原寸」では両方をそのままのピクセルサイズで左上にそろえます。「差分」では、片方の画像にしかない範囲を変更ありとして数えます。
「差分」はどうやって変化を判定していますか？
対応するピクセル同士の赤・緑・青の値を比べ、どれかが許容範囲を超えて違えば、そのピクセルを赤で示します。透明な部分は白い背景の上で比べます。とても大きな画像は縮小して比較し、その場合は画面に表示します。
どの画像形式に対応していますか？
PNG、JPG、WebP、HEIC のほか、ブラウザで開ける多くの画像形式に対応しています。1 枚あたり 50 MB まで読み込めます。SVG は決まったピクセルの格子を持たないため、対応していません。
「PNGをダウンロード」では何が保存されますか？
画面に表示している比較です。「スライダー」は線の位置で分けた 2 枚、「横に並べる」は並べた 2 枚、「重ねて透過」はいまの不透明度で重ねた画像、「差分」は赤とグレーの差分画像を保存します。元のサイズがブラウザで扱えないほど大きい場合は縮小して保存し、そのことを画面に表示します。
Webページの変更前後を同じ条件で撮りたいなら
ShotomaticのWebsite Captureは、URLリストのページをMac上で指定した表示サイズで撮影します。設定は保存されるので、変更後に同じURLをもう一度撮影して、ここで比較できます。