メインコンテンツへスキップ
Toolars
探索
バグを報告

画像 · ローカルユーティリティ

画像差分

Image Diff

PNG・JPEG・WebP の 2 枚の画像をピクセル単位で比較し、分割・スライダー・フェード・ハイライト・差分マスクのビューを提供します。

ローカルで実行 · アップロードなし

Toolars がコンテンツを管理 · 2026-09-03 更新

画像差分 · ローカル像素

画像差分

PNG・JPEG・WebP の 2 枚の画像を分離 Worker でピクセル単位で比較し、分割・スライダー・フェード・ハイライト・差分マスクのビューを提供します。
準備完了

元の画像

元の画像を選択

変更後の画像

変更後の画像を選択

2 枚の画像を選んで比較を始める

準備完了

画像差分の使い方、プライバシー、関連ツール

タスクの道筋 / 入力から結果へ

2 枚の画像を比較する方法

  1. 01

    2 枚の画像を選ぶ

    元の画像と変更後の画像を選びます。PNG・JPEG・WebP に対応し、各 12 MiB、一辺 8,192 ピクセル、精密比較は 800 万ピクセルまでです。JPEG は読み込み時に EXIF 向きへ正規化され、両側に形式・寸法・ファイルサイズが表示され、左右を入れ替えはワンクリックです。

  2. 02

    結論を読む

    寸法が一致すると、分離 Worker で自動的に比較されます。しきい値 0 で差分ゼロなら「ピクセル完全一致」、しきい値より上の差分がゼロなら「現在のしきい値では差分なし」とそのまま表示し、それ以外は差分ピクセル数と全体に占める割合を示します。

  3. 03

    5 つのビューを切り替える

    分割は 2 枚を並べて同期ズーム・パン——スクロールで拡大、ドラッグで移動、ボタンや矢印キーも使えます。スライダーはキーボード操作できる境界線で差分を示し、フェードは不透明度を調整して重ね、ハイライトは元画像の上に差分ピクセルを示し、差分マスクはそれだけを表示します。

  4. 04

    しきい値とアンチエイリアスを調整する

    一致しきい値は、2 色がどこまで離れたら差異と数えるかを決めます。0 は厳密で、上げると JPEG 再圧縮のノイズを吸収します。アンチエイリアス端を無視は描画された文字や図形の柔らかい境界ピクセルを飛ばします。変更のたびに自動で再比較され、前の実行はキャンセルされます。

  5. 05

    マスクを書き出す

    マスク PNG を書き出すと、差分ピクセルをすべて示した透明背景のマスクが保存され、チケットやレビューにそのまま添付できます。ピクセル一致はデコード後の像素が同じという意味で、ファイルのバイト一致ではありません。ファイル自体を検証するときはハッシュチェッカーを使ってください。

ツールの概要

処理
ブラウザー内で完結
入力の外部送信
なし
保存
一切保存しません
価格
無料

入力はブラウザに留まります。

画像差分 は検証済みのローカル実行パスを使用し、隠れた入力・出力履歴を作成しません。

ローカル実行

現在のブラウザタブ内で実行されます。

隠れた処理なし

使用中のツールデータが Toolars のドキュメントレコードになることはありません。

アカウント不要

プロフィールを作成せずにコアワークフローを使えます。お気に入りはログイン後にアカウントへ同期されます。

即時リセット

タブを閉じれば、作業中のデータは消えます。

画像差分 が役立つ場面

フォーカスされた変換

別のアプリケーションを用意せず、明確に定義されたブラウザタスクを1つ完了できます。

コピー可能な出力

コピーやダウンロードの前に、ソースと結果を並べて確認できます。

高速な検証

不正な入力や古い結果が別のワークフローに入る前に検出できます。

画像差分 が実際に行うこと

デザイン修正が戻ってきて、意図した領域だけが変わったことを確認しなければなりません。UI 回帰テストでは 2 つのビルドのスクリーンショットがあり、失敗箇所は長いページのどこかに隠れています。同じパイプラインの 2 回の書き出しは同一のはずなのに、目では証明できません。2 枚を読み込み——比較はすべてローカルで実行されます——ハイライトに切り替えると紛れ込んだ透かしが元画像の上で赤く光り、ボタンが 2 ピクセルずれた場所はスライダーを動かして確認し、マスクを書き出して不具合票に添付します。スクリーンショットの寸法が異なるときは、数字を作らず「視覚比較のみ」と表示し、精密比較が必要ならまず画像リサイズで寸法を合わせます。

結果を明示

コピーやダウンロードの前に、現在の結果と選択中の設定を確認できます。

確認しやすいワークフロー

結果を使う前に、関連する構造、メタデータ、ソースの文脈を確認できます。

デフォルトでプライベート

ワークスペースのアクティブな値は、保存もサーバー送信もされません。

エラーは常に明示的

不正な値には古い出力ではなく、明確なエラーを返します。

よくある質問

どの画像形式に対応していますか?
PNG・JPEG・WebP で、ファイル名ではなくファイル署名で検証し、各 12 MiB までです。GIF アニメーション、HEIC、SVG、PDF ページは意図的に対象外です。アニメーション処理か、ブラウザーごとに差のあるデコーダーが必要になり、ピクセル結論の信頼性を損なうためです。
画像の寸法が異なるとどうなりますか?
ワークスペースは視覚比較のみに切り替わります。分割・スライダー・フェードは引き続き使えて両方の版を確認できますが、ピクセル数や割合は報告しません。リサイズされたピクセルから計算した数字は偽の結論になるからです。精密比較が必要なら、先に画像リサイズで片側を同じ寸法にしてください。
しきい値は何を変えるのですか?
2 つのピクセルが差異と数えられるまでの色距離です。しきい値 0 はすべてのチャネル差を数える厳密な設定で、厳格な書き出しチェックに向きますが、JPEG 再圧縮のノイズも拾います。上げるとそのノイズを吸収します。アンチエイリアス端を無視を併用すると、描画が生む柔らかい境界ピクセルを飛ばし、文字や図形の端がカウントを埋めなくなります。
ピクセル一致はファイルが同一という意味ですか?
いいえ。この結論は EXIF 正規化後にデコードされたピクセルを比較します。エンコーダー、圧縮レベル、メタデータが違う 2 つのファイルでも、デコード後のピクセルは完全に一致しえます。バイトそのものが重要な場面——整合性チェックやキャッシュキー——では、ファイルに対してハッシュチェッカーを使ってください。
色は厳密に比較されるのですか?
色はブラウザーがデコードした RGBA として比較され、カラーマネジメント変換は行いません。したがって厳密なのはそのデコード空間においてで、印刷校正レベルの色差測定ではありません。透明度はアルファチャネルで比較に参加し、ブラウザー間でデコードが異なる場合、誠実な範囲はこのブラウザーが見たピクセルです。
画像はどこかにアップロードされますか?
いいえ。2 つのファイルは現在のブラウザータブ内に留まり、デコードとピクセル比較は分離されたローカル Worker で実行され、何も送信・保存されず、アカウントも不要です。

画像スタジオを続ける

行き止まりではなく、関連タスクへ。

完全な索引に戻らずに、別のフォーカスされたワークスペースへ移動できます。