画像Diff

画像Diffツールは、2つの画像をピクセルレベルで比較できる無料のブラウザベースツールです。ビジュアルリグレッションテスト、デザイン変更の確認、画像圧縮アーティファクトの比較、写真編集の検証など、「Before」と「After」の画像間のあらゆる違いを即座にハイライトします。

3つの比較モードを提供しています。サイドバイサイドは両方の画像を並べて表示し、素早い視覚的スキャンが可能です。オーバーレイはスライダーを使って2つの画像をシームレスに遷移させ、レイアウトや色の微妙な変化を見つけやすくします。ピクセルDiffは各ピクセルの正確な差分を計算し、変更されたピクセルをグレースケール背景にマゼンタで表示し、影響を受けた領域にバウンディングボックスを描画します。

すべての処理はCanvas APIのgetImageData()メソッドを使用してブラウザ内で完全に実行されます。画像がサーバーにアップロードされることはないため、プロプライエタリなデザイン、機密データを含むスクリーンショット、社内アセットの比較にも安全にご利用いただけます。許容値スライダー（0-50）により、アンチエイリアシング、JPEG圧縮、サブピクセルレンダリングの違いによる軽微な色差をフィルタリングできます。

画像ではなくテキストベースのコンテンツを比較する場合は、行単位のテキスト比較にはDiffビューア、構造的なJSON比較にはJSON Diffツールをお試しください。色関連の分析には、カラーコンバーターがHEX、RGB、HSL値の検査と変換に役立ちます。

1. 左側のアップロードエリアに**「Before」画像**をドラッグ＆ドロップするか、「ファイルを選択」をクリックしてデバイスから選択します。
2. 同じ方法で右側のアップロードエリアに**「After」画像**をアップロードします。
3. ツールが自動的にピクセルレベルのDiffを計算します。変更されたピクセル数、総ピクセル数、差分パーセンテージを示すバッジを確認してください。
4. タブで比較モードを切り替えます：サイドバイサイド、オーバーレイ（スライダー）、ピクセルDiff。
5. オーバーレイモードでは、スライダーを左右にドラッグして各画像を表示し、変更を確認します。
6. 許容値スライダー（0-50）を調整して、アンチエイリアシングの違いなどの軽微な色差をフィルタリングします。
7. ズームイン/アウトボタンで詳細を確認し、ズーム時にはクリック＆ドラッグで画像をパンできます。
8. DiffをダウンロードをクリックしてDiff画像をPNGとして保存するか、統計をコピーで結果をクリップボードにコピーします。