画像差分比較
2枚の画像をピクセル単位で比較し、差分箇所を赤くハイライトして可視化します
画像 A(Before)
クリックまたはドロップ
JPEG・PNG・WebPなど
画像 B(After)
クリックまたはドロップ
JPEG・PNG・WebPなど
推奨: スクリーンショット比較は 10〜20、印刷物の確認は 5 以下
よくある質問
画像差分比較ツールは無料で使えますか?
はい、完全無料でご利用いただけます。登録や会員登録も一切不要です。
ファイルはサーバーに送信されますか?
いいえ、すべての処理はお使いのブラウザ内で完結します。画像データが外部に送信されることはなく、機密性の高い画像も安心して比較できます。
対応している画像形式は?
JPEG・PNG・WebP・GIF・BMP・SVGなど、ブラウザが表示できる主要な画像形式に対応しています。
差分の感度(しきい値)とは何ですか?
各ピクセルのRGB値の差が「しきい値」を超えた場合に差分として検出します。0に近いほど微細な色の違いも検出し、100に近いほど目立つ差異のみを検出します。スクリーンショット比較には10〜20程度、印刷物の確認には5以下が推奨です。
画像のサイズが異なる場合はどうなりますか?
2枚の画像のサイズが異なる場合でも比較できます。サイズの小さい方に合わせて比較範囲が決まり、はみ出した領域はすべて差分として扱われます。
デザインのビフォーアフター確認に使えますか?
はい、デザイン修正前後のスクリーンショットを比較することで、意図しない変更箇所の発見やデザインレビューに活用できます。フロントエンド開発のリグレッションチェックにも便利です。
差分が多い場合、処理に時間がかかりますか?
高解像度画像(例: 4K以上)は処理に数秒かかる場合があります。通常のスクリーンショット(1920×1080程度)であれば数百ミリ秒以内に結果が表示されます。
差分結果の画像をダウンロードできますか?
はい、差分ハイライト画像をPNG形式でダウンロードできます。議事録やバグレポートに添付する際に便利です。
画像ツール一覧
すべて見るこのツールについて
使い方
- 「画像 A(Before)」に比較元の画像をアップロード
- 「画像 B(After)」に比較先の画像をアップロード
- 必要に応じて差分感度(しきい値)を調整
- 「差分を比較する」ボタンをクリック
- 差分マップで赤くなった箇所が変更された部分
このツールの特徴
- ✓完全無料・登録不要:ブラウザ内で処理するためファイルがサーバーに送られません。機密性の高いデザインや図面も安心して比較できます
- ✓ピクセル単位の精度:1ピクセル単位で差分を検出。しきい値調整により、JPEG圧縮ノイズを無視しながら意味のある変更だけを検出できます
- ✓サイズ違いの画像にも対応:2枚の解像度が異なっていても比較できます
- ✓差分マップをダウンロード:PNG形式で保存してバグレポートや議事録に添付できます
こんなときに便利
- •フロントエンド修正後のビジュアルリグレッションチェック
- •デザイン修正前後のスクリーンショット比較(デザインレビュー)
- •印刷物・PDF出力の紙面変更確認(契約書・マニュアルの改訂チェック)
- •QA・テスターによるスクリーンショットの自動比較補助
- •監視カメラ画像や定点観測写真の変化確認
仕組み・技術的背景
HTML Canvas API の getImageData() を使って各ピクセルの RGBA 値を取得し、R・G・B チャンネルの差の合計がしきい値を超えるかどうかで差分を判定します。 差分ピクセルは赤(RGB: 255, 30, 30)でハイライトし、それ以外はグレースケールに変換して表示することで、変更箇所を直感的に把握できるようにしています。 処理はすべてメインスレッドで実行され、ファイルはサーバーに一切送信されません。