画像差分検出 — 2 枚の画像のピクセル差をハイライト
2 枚の画像 (JPEG / PNG / WebP / GIF) を Canvas で比較し、異なるピクセルだけを指定色でハイライトした差分画像を生成します。デザイン QA / 転載チェック / regression 検証 / スクリーンショット比較に。許容閾値で「ほぼ同じ色」のノイズを無視し、一致率を % で表示。Diff のみ / 元画像にオーバーレイの 2 表示モード。比較は完全にブラウザ内で行われ、画像はサーバーに送信されません。
使い方
比較する 2 枚の画像をそれぞれのスロット (A と B) にドロップまたは選択します。サイズが完全に一致している必要があります。 表示モード (差分のみ / 画像 A にオーバーレイ) と、許容閾値・ハイライト色のオプションを調整します。 差分画像が自動的に再計算されます。一致率や差分ピクセル数は結果欄に表示されます。 「差分画像をダウンロード」で結果を PNG として保存できます。
よくある質問
- 画像 A と B のサイズが違うときはどうなりますか?
- 比較は行われず、エラーバナーが表示されます。画像リサイズツールでサイズを揃えてから再度比較してください。
- 許容閾値はどう設定すればよいですか?
- 値を 0 にすると完全一致しか「同じ」と扱われません。JPEG など圧縮ノイズがある画像同士を比較する場合は 5〜15 程度から試してください。スクリーンショット比較なら 1〜3 で十分なケースが多いです。
- 差分のみとオーバーレイの違いは?
- 「差分のみ」は背景透明で、ハイライト色だけが描かれた PNG が出力されます。マスクとして他の素材に重ねたいときに便利です。「オーバーレイ」は画像 A をうっすら背景に置いて差分を重ねるため、どの場所が変わったかを文脈と一緒に確認できます。
- アニメ GIF や動画の比較もできますか?
- GIF は 1 フレーム目だけが比較対象になります。動画の比較は静止画 1 枚に書き出してから読み込ませてください (動画フレーム抽出ツールが便利です)。
- データはどこかに送信されますか?
- いいえ。すべて Canvas + getImageData でブラウザ内処理されます。
類似のツール
画像圧縮 — 容量削減 (JPG / PNG / WebP)
寸法を変えずにファイルサイズを縮小します。JPEG / WebP は品質スライダーで再エンコード、PNG は oxipng (WASM) でロスレス最適化。複数ファイルを一括処理し、個別保存 / ZIP ダウンロードに対応。すべてブラウザ内で処理。
画像形式変換 — JPG / PNG / WebP 相互
画像を JPEG / PNG / WebP の間で変換します。ブラウザの Canvas で再エンコードするのでネット通信なし。JPEG/WebP は品質スライダー対応。複数ファイル一括処理 + ZIP ダウンロード対応。
ミーム画像生成 (Impact 風キャプション)
画像の上部と下部に Impact 風のフォントで白文字 + 黒縁取りのキャプションを乗せて、海外掲示板でおなじみの『meme』風画像を生成。フォントサイズ・文字色・縁取り色・縁取り幅・大文字化 を調整可、長文は自動で折り返し (日本語は文字単位、英語は単語単位)。出力は PNG / JPEG / WebP。Canvas のみで実装され、フォントは Impact → Anton → Oswald → Arial Black の順で fallback。画像はアップロード後すべてブラウザ内で処理され、サーバーへ送信しません。
テキスト差分 — 行 / 単語単位の比較
2 つのテキストを行単位で比較して差分を表示。Inline / Side-by-Side 表示、行内ワード差分、前後の空白の無視に対応。すべてブラウザ内で処理。