ブラウザ内ピクセル比較

画像差分チェッカー, ピクセル差分の結果.

差分ハイライトから始め、しきい値を調整し、変更ピクセル、平均 RGB 差分、RMSE、PSNR をローカル Canvas 比較で確認します。

ピクセル差分ラボ

画像差分チェッカー

実例を読み込むか、自分の PNG, JPG, JPEG, WebP ファイルを比較します。ピクセルスコアはローカル差分の実行後に更新されます。

画像はこのブラウザセッション内に留まりますPNG, JPG, JPEG, WebPピクセル指標は差分ハイライト後に更新

ピクセル一致

ローカル差分を実行ローカル差分が必要

変更ピクセル

ローカル差分を実行ローカル差分が必要

RMSE

ローカル差分を実行ローカル差分が必要

差分ケース 3 / 4

ポートレートのレタッチ

肌、トーン、顔まわりの細部の変更。

差分ハイライト

ブラウザ内ピクセル比較を実行して差分プレビューを作成します。

18

低い値は細かな変化を拾い、高い値は圧縮ノイズ、小さな明るさの変化、アンチエイリアスを無視します。最大 RGBA チャンネル差分がこの値を超えると変更として数えます。

ピクセルスコアは保留中

差分を分析

ブラウザ内差分を実行して、結果チップとサイド指標カードを埋めます。

視覚的な変化

ローカル差分を実行ローカル差分が必要

平均 RGB 差分

ローカル差分を実行ローカル差分が必要

PSNR

ローカル差分を実行ローカル差分が必要
1

画像を追加

どちらかを置き換えてから、測定結果のためにローカル差分を実行します。

基準画像 用の PNG、JPG、JPEG、WebP ファイルを選択またはドロップします。

A

基準 / 前

基準画像 のプレビュー

portrait-before.webp

960 x 720px - 42 KB

変更画像 用の PNG、JPG、JPEG、WebP ファイルを選択またはドロップします。

B

変更 / 後

変更画像 のプレビュー

portrait-after.webp

960 x 720px - 44 KB
2

差分モードを確認

差分ハイライトが主表示です。スライダー、横並び、オーバーレイで文脈を確認できます。

3

差分結果

ローカルピクセルスコアには、ビューア近くのピクセル差分を実行を使います。差分ハイライトを開き、このブラウザで計算します。

01

画像差分チェッカーで変更ピクセルを見つける

赤いマークは、しきい値付きピクセル比較で見える変更が検出された場所を示します。

02

しきい値を調整

UI の厳密確認は 8、写真の細部は 18、バランスは 32、大きな変更は 64 を使います。

03

誤差指標を読む

変更ピクセル%、平均 RGB 差分、RMSE、PSNR で 2 枚の違いを説明できます。

差分指標

画像差分チェッカーのピクセル差分結果

このチェッカーは視覚確認と計算結果を分けます。ファイル詳細は読み込み後に表示され、ピクセル指標はローカル差分後に更新されます。

01

変更ピクセル

最大チャンネル差分が現在のしきい値を超えたピクセルを数えます。

02

差分率

正規化された比較 Canvas 全体に対する変更ピクセルの割合を示します。

03

RMSE と PSNR

RGB 誤差を要約します。RMSE が低く PSNR が高いほど、画像は視覚的に近くなります。

方法

画像差分チェッカーで画像差分を計算する方法

2 枚の画像をローカルでデコードし、共通の正規化 Canvas に描画して、チャンネルごとに比較します。しきい値が変更ピクセルを決めます。

しきい値付きピクセル変更

赤、緑、青、アルファの最大チャンネル差分が選択したしきい値を超えると、そのピクセルを変更として数えます。

比較可能な Canvas

寸法が異なる画像は 1 つの Canvas 中央に配置されます。大きなファイルはブラウザ応答性のため縮小されることがあり、結果パネルに倍率が表示されます。

読みやすい誤差指標

平均 RGB 差分、RMSE、PSNR は、ハイライトプレビューと同じローカル RGB 差分を技術的に示します。

用途

画像差分チェッカーが役立つ場面

見える変更をすばやく見つけたい実務で、同じブラウザ内ワークフローを使えます。

01

スクリーンショット回帰確認

レンダリング差の小さな許容を残しながら UI スクリーンショットの変更を見つけます。

02

写真と商品レタッチ確認

色、クリーンアップ、影、レタッチが 2 つの書き出し間で変わった場所を確認します。

03

圧縮と書き出し確認

JPEG、PNG、WebP の書き出しを比較して、最適化後の見えるピクセル変化を確認します。

04

AI 生成バリアント比較

AI 生成画像の 2 つのバリアントを、ローカルのピクセル測定で視覚比較します。

05

ポートレートと顔写真の確認

レタッチ、表情、切り抜き、照明の変化をポートレートや顔写真で視覚比較します。

よくある質問

画像差分チェッカーのよくある質問

回答は表示中のツールに合わせています: ローカルプレビュー、しきい値付きピクセル比較、サーバーアップロードなし。

どのしきい値を使うべきですか?

画像差分チェッカーではまず 18 から始めます。厳密な UI スクリーンショットは 8、写真の細部は 18、バランスのよい確認は 32、大きな見える変更だけなら 64 を使います。

画像が読み込まれたかどうかはどう確認できますか?

画像がアップロード欄に表示されれば、通常は読み込み成功です。画像ファイルが大きい場合は読み込みに時間がかかり、比較も遅くなることがあります。

AI 生成画像を比較できますか?

はい。AI 生成バリアントを 2 枚の選択画像として比較できます。結果はローカルのピクセル測定です。

顔比較に使えますか?

ポートレートや顔写真を視覚的に比較できます。このツールは本人確認や生体認証を行いません。