画像の変更箇所をブラウザで確認する
BeforeとAfterを読み込むと、Side-by-Side・Overlay・Pixel差分をBrowser内で切り替えられます。
画像差分比較ツールを開く結論：全体比較からPixel差分へ段階的に絞る
最初にSide-by-Sideで欠落や追加を見て、Overlayで位置ずれを確認し、最後にPixel差分と統計を読みます。差分率だけで合否を決めず、強調された位置が意図した変更かを確認します。
ファイルのHashが異なることと、表示Pixelが異なることは同じではありません。Metadataだけが違う画像はPixel比較で一致する場合があります。
比較する画像と前提条件を確認する
左右の役割、画像寸法、Format、撮影条件をそろえます。基準が逆になると差分Pixel数は同じでも変更の説明が逆になります。
| 確認項目 | 確認する内容 | 差分への影響 |
|---|---|---|
| 左右 | 左をBefore、右をAfterに固定 | 変更の向きを説明しやすくする |
| 寸法 | 幅と高さを確認 | 余白や位置ずれの差を分離する |
| 形式 | PNG・JPEG・WebPなどを確認 | 圧縮やAlphaの影響を予測する |
| 撮影条件 | Viewport・倍率・Fontをそろえる | 環境差によるノイズを減らす |
画像差分比較ツールで確認する
- 1. 左へ基準画像、右へ変更後画像を選択します。
- 2. 表示された幅・高さとFile名を確認します。
- 3. Side-by-Sideで大きな変更を確認します。
- 4. OverlayのOpacityを動かして輪郭のずれを確認します。
- 5. Pixel差分へ切り替え、Thresholdと差分Pixel数を確認します。
- 6. 必要なら差分画像をPNGで保存します。
画像サイズ・位置・解像度を確認する
現行ツールは2枚のうち大きい幅・高さを比較Canvasにし、それぞれを中央配置します。同寸法なら同じ座標を直接比較できます。
サイズが違う画像を自動拡大・縮小していません。周囲の差分を内容変更と誤認しないでください。
Pixel Diffと統計を読み取る
各PixelのR・G・B・Alphaの差のうち最大値を求め、Thresholdを超えた座標を変更Pixelとして数えます。差分率は変更Pixel数÷比較対象の総Pixel数です。
| 表示 | 意味 | 判断時の注意 |
|---|---|---|
| 差分Pixel数 | Thresholdを超えた座標数 | 変更面積ではなく座標数 |
| 差分率 | 差分Pixel数÷総Pixel数 | 小さいUI部品変更は率が低くても重要 |
| 最大差 | 最大Channel差を0～255で表示 | どのChannelかは表示しない |
Thresholdを調整する
まず初期値16で分布を見て、微小な輪郭差を含めたい場合は下げ、圧縮Noiseを抑えたい場合は少しずつ上げます。値を変えるたびに強調位置と統計を一緒に確認します。
Thresholdに万能な正解値はありません。比較目的と許容するRendering差を決め、同じ条件で継続して評価します。
Alpha・アンチエイリアス・画像形式を確認する
同じ見た目でもJPEG圧縮、Font Rendering、透明PixelのRGB値で差が出ます。現行ツールはAlphaも含む厳密なRGBA比較なので、見た目との違いを原因別に切り分けます。
| 要因 | 起こる差分 | 確認方法 |
|---|---|---|
| JPEG | 広い範囲に微小な色差 | PNG版でも比較する |
| アンチエイリアス | 文字や斜線の境界に点状差分 | 同じOS・Browser・Fontで再撮影 |
| Alpha | 透明部分や半透明の影に差分 | 背景色を変えて見た目も確認 |
不要な差分を減らして原因を切り分ける
- 左右をSwapしてBefore / Afterの取り違えを除外します。
- 同じ画像を左右へ入れて差分0になるか確認します。
- 画像寸法が違う場合は元のCapture範囲をそろえます。
- JPEGならPNGで再出力した比較も行います。
- 差分率だけでなく強調位置を元画面の要素と対応付けます。
画像比較方式を使い分ける
| 方式 | 確認しやすい違い | このツール |
|---|---|---|
| Side-by-Side | 追加・削除、大きなLayout変更 | 対応 |
| Overlay | 位置ずれ、輪郭、Opacityを変えた目視確認 | 対応 |
| Pixel-level Diff | 同じ座標のRGBA差、差分Pixel数 | 対応 |
| Visual / Perceptual Diff | 人が同じと感じる微小差を許容した判定 | 専用判定は未対応 |
Pixel-level Diffは見た目の意味を理解せず、同じ座標の値を比較します。数値上の差分と、利用者に見える不具合は分けて判断してください。
現在の画像差分比較ツールで確認できる範囲
| 項目 | 現在の対応 | 未対応・確認上の注意 |
|---|---|---|
| 入力 | 左右のFile選択、Drag & Drop、ページへの1～2件Drop | Clipboard貼り付けとURL読込はない |
| 形式 | Browserがimage/*としてDecodeできるPNG、JPEG、WebP、GIF、BMP、SVGなど | HEIC等はBrowser対応に依存し、Animated画像の全Frame比較はない |
| 表示 | Side-by-Side、Overlay、Pixel差分、Zoom | Swipe Sliderと同期Panはない |
| 寸法 | 大きい方のCanvasへ各画像を中央配置 | 自動Resize、Crop、手動Offset、自動位置合わせはない |
| 差分判定 | RGBA各Channelの最大差がThresholdを超えたPixelを変更として判定 | Thresholdは0～255で、Pixelmatchの0～1設定とは別物 |
| Alpha・輪郭 | Alpha Channelも比較対象 | Alpha無視、背景合成、アンチエイリアス除外はない |
| 統計 | 比較寸法、差分Pixel数、差分率、最大Channel差 | Similarity率、Bounding Box、差分領域数はない |
| 出力 | 差分画像をPNGでDownload | 比較設定や履歴の保存、Report出力はない |
| 処理場所 | Decode・Canvas描画・比較はBrowserのMain Thread内 | Web Workerは未使用。Tool本体は画像BinaryやFile名をServerへUploadしない |
画像サイズが異なる場合は小さい画像を拡大せず中央配置し、周囲の透明領域も比較します。位置合わせやCropを自動実行した結果ではありません。
一次資料と現在の実装を照合する
- Pixelmatch: GitHub Repository
- Playwright: Visual Comparisons
- MDN: Pixel manipulation with canvas
- MDN: CanvasRenderingContext2D.drawImage()
- MDN: ImageData
PixelmatchやPlaywrightのThreshold・Optionは、それぞれのLibrary固有です。DevelopToolsの0～255 Thresholdと同じ値として読み替えず、利用する実装の公式資料を確認します。
設定画面の修正前後を比較する例
同じViewportで取得したPNGをBeforeとAfterとして用意します。
ボタン色だけを変更した想定で、Layoutずれが混入していないか確認します。
- Beforeを左へ読み込みます。
- Afterを右へ読み込みます。
- Overlayで輪郭が重なることを確認します。
- Pixel差分でボタン周辺だけが強調されることを確認します。
- 差分Pixel数とThresholdを記録します。
意図したボタン以外も強調された場合は、Font・Animation・Viewportの条件を確認します。
よくある質問
- 画像の中身はサーバーへ送られますか？
- 比較処理はブラウザ内で行い、ツール本体は選択画像をサーバーへアップロードしません。
- 差分率0%なら完全に同じファイルですか？
- 表示Pixelは設定したThreshold内で一致していますが、Metadataや圧縮構造を含むFile Binaryの一致はHashで別途確認します。