画像差分ビューア
UI修正前後のスクリーンショットなど2枚の画像を比較するツールです。左右を切り替えるスライダー、半透明の重ね合わせ、変更されたピクセルを赤で強調する差分表示の3つの方法で確認できます。PNG・JPEG・WebPに対応し、すべてブラウザ内で処理されます。
PNG・JPEG・WebPの画像をドロップするか、ボタンから選択してください
PNG・JPEG・WebPの画像をドロップするか、ボタンから選択してください
変更前と変更後の画像を読み込むと、比較結果が表示されます。
使い方
- 「変更前の画像」と「変更後の画像」に、それぞれ画像をドロップするか選択します。
- 「スライダー」では、境界を動かして変更前（左）と変更後（右）を見比べます。矢印キーでも操作できます。
- 「重ね合わせ」では、変更後の画像の不透明度を変えながら比較します。
- 「ピクセル差分」では、異なるピクセルが赤で表示されます。JPEGのノイズを無視したい場合は許容する色の差を上げます。
このツールについて
CSSの修正やライブラリの更新のあと、意図しない見た目の変化がないかを目視だけで確認するのは大変です。画像差分ビューアを使うと、修正前後のスクリーンショットを並べるだけで、変わった箇所をすぐに見つけられます。
ピクセル差分では、各ピクセルのRGBと透明度（アルファ）を比較します。透明部分を含む画像も比較でき、両方とも完全に透明なピクセルは同じとみなします。画像のサイズが異なる場合は、差分を隠してしまわないよう自動でリサイズせず、サイズの違いを表示します。
自動の位置合わせやOCR、Webページの自動撮影には対応していません。画像がサーバーへアップロードされることはありません。
同じPNGを変更前と変更後の両方へ読み込み、許容する色の差を0にすると、ピクセル差分の変更数は0になります。次に片方の画像の一部だけを塗り替えたPNGへ差し替えると、その領域が強調され、比較対象の取り違えも確認できます。
判定は各ピクセルのRGBA差に基づき、文章や部品の意味を認識するものではありません。撮影位置のずれも変更として現れるため、スクリーンショットの寸法と表示倍率を揃えると読み取りやすくなります。画像データはCanvasで読み取り、ブラウザ内で比較します。
よくある質問
サイズの違う画像を比較できますか？
自動でリサイズすると本当の差分が隠れてしまうため、サイズが同じ画像のみ比較できます。同じウィンドウサイズ・同じ表示倍率で撮影し直してください。
JPEGで差分が多く出てしまいます。
JPEGは圧縮によって細かなノイズが生じます。「許容する色の差」を上げると、小さな色の違いを無視できます。正確に比較したい場合はPNGを使用してください。
画像がサーバーに送信されることはありますか？
ありません。画像の読み込みと比較はすべてブラウザ内で行われます。