画像差分チェッカー
2枚の画像をピクセル単位で比較し、変更点を即座に可視化。差分をハイライトした画像とパーセンテージの要約を表示します——すべてブラウザ内でローカルに処理されます。
🔒 お使いのブラウザ内でローカル処理されます
Loading…
使い方
- 「変更前の画像」エリアに元の画像をドラッグ＆ドロップ（またはクリックして選択）します。
- 「変更後の画像」エリアに比較したい画像をドラッグ＆ドロップ（またはクリックして選択）します。
- 「画像を比較」をクリックすると、ブラウザ内でピクセル単位の比較が実行されます。
- ハイライトされた差分画像と差分ピクセルの割合を確認し、必要に応じて差分画像をダウンロードします。
特徴
- オープンソースのpixelmatchライブラリによるピクセル単位の比較
- 背景を暗くした上ですべての差分ピクセルをハイライトし、変更点を見つけやすく表示
- 差分ピクセルの正確な数とパーセンテージを表示
- サイズが一致しない画像は明確なエラーで警告し、誤った比較を防止
- 100%クライアントサイド処理——画像がサーバーにアップロードされることはありません
よくある質問
このツールはどんな用途に向いていますか？
ビジュアルリグレッションテスト（ビルド間でUIが意図せず変わっていないかの確認）、デザインやスクリーンショットの2つのバージョンの比較、写真の細かな編集の発見、画像を再圧縮しても目に見える画質劣化がないかの確認などに便利です。
なぜ2枚の画像のサイズが一致している必要がありますか？
比較はピクセル単位で行われ、1枚目の各ピクセルを2枚目の同じ位置のピクセルと照合します。サイズが異なると意味のある1対1の対応関係が成立しないため、誤ったデータを比較する代わりに明確なエラーを表示します。
差分画像はどのように生成されますか？
オープンソースのピクセル比較ライブラリpixelmatchを使用しています。一致している部分は暗くなり、アンチエイリアスを考慮したしきい値を超えて異なるピクセルは目立つ色でハイライトされます。
画像はどこかにアップロードされますか？
いいえ。2枚の画像の読み込みと比較はすべてブラウザ内でCanvas APIを使って行われます。サーバーには一切送信されません。
見た目がまったく同じ2枚の画像でも差分ピクセルが表示されるのはなぜですか？
圧縮方法や色プロファイル、再エンコードによるわずかな違いで、見た目が同じでも個々のピクセル値がわずかに変化することがあります。差分ピクセルの割合が非常に小さい場合、これは実際の見た目の変化というより、こうしたノイズによるものと考えられます。