画像差分チェッカーの使用方法

オリジナル、以前のスクリーンショット、または参照エクスポートをベースライン イメージとして使用します。明確なベースラインにより、ピクセル数の変化を見つけやすくなります。

新しいスクリーンショット、編集された写真、最適化された画像、またはエクスポートされたバリアントを変更された画像として使用します。ディメンションが一致しない場合は、指標を確認する前に調整チェックが必要です。

[差分] を強調表示すると、変更された領域がマークされ、メトリック カードが塗りつぶされます。スライダー、サイドバイサイド、およびオーバーレイ ビューでは、強調表示された結果を視覚的なコンテキストで確認できます。

しきい値を低くすると、微妙な変化が捉えられます。しきい値を高くすると、圧縮ノイズ、わずかな照明の変化、アンチエイリアスが無視されます。しきい値を変更した後、差分を更新します。

厳格なUIチェック

スクリーンショットの小さな変更を明確に捉える必要がある場合は、8 を試してください。

• ボタンのラベルが「保存」から「適用」に変更されました。

• アイコンがわずかに移動したり、細い境界線が消えたり、テキストの間隔が変更されたりしました。

この値により、テキストやエッジの周囲の小さなレンダリング ノイズも捕らえられる可能性があります。

細かい写真の詳細

よく見て初めてわかる画像編集には 18 を試してください。

• 製品の影が柔らかくなったり、顔のレタッチで小さな跡が消えたり、生地の質感が変わったりします。

• 写真はほぼ同じに見えますが、ハイライト、反射、またはカラーパッチが編集されています。

綿密なレビューに適しています。

バランスのとれたデフォルト

ほとんどの比較では 32 から始めます。

• ランディング ページのスクリーンショットにはテキストと写真の両方が含まれます。

• 製品画像が再度エクスポートされたか、別のツールからのプレビューを簡単に確認する必要があります。

より厳密なチェックを行う場合は低くし、ノイズの多いファイルの場合は高くします。

目に見える大きな変化

明らかな変化に焦点を当てるには、64 を試してください。

• 背景が置き換えられたり、オブジェクトが移動されたり、トリミングが変更されたり、または強い色の変化が発生した。

• JPEG または WebP のエクスポートには小さなノイズが含まれますが、レビューではすぐに気づく変更点のみが考慮されます。

小さな文字、細かいアイコン、ヘアラインの境界線が目立たなくなる場合があります。

現在のしきい値を超える同等のキャンバス ピクセルの数。値はしきい値とアライメントに大きく依存します。

変更されたピクセルをすべての比較可能なピクセルで割った値。これは、画像サイズやトリミング領域が異なる 2 つの実行を比較するのに役立ちます。

平均絶対 RGB チャネル差。ここでは、変化した面積のパーセンテージが小さい場合でも、広範囲の色や明るさの変化が現れることがあります。

二乗平均平方根 RGB エラー。局所的な大きな差は、散在する小さな差よりも RMSE に強く影響します。

ピーク信号対雑音比。通常、PSNR が高いということは、画像が RGB 信号に近いことを意味します。 PSNR が低いほど、目に見える誤差または測定可能な誤差が多くなります。

画像がほぼ同じに見える場合でも、1 ピクセルのシフトにより多くの領域が明るくなります。オーバーレイを開き、メインエッジが揃っているかどうかを確認します。

幅や高さが異なると、比較が直接的ではなくなります。ビジュアル ビューを使用して目に見える変化を見つけ、一致するサイズをトリミングまたはエクスポートしてより明確なメトリクスを実現します。

JPEG および WebP のエクスポートでは、フラットなカラーとエッジ全体に小さな斑点が追加されることがよくあります。レビューが目に見える編集に関するものである場合は、しきい値を上げます。

ブラウザ、フォント、またはエクスポートの変更後、フォント、アイコン、ベクターのエッジがわずかに異なるピクセルに配置されることがあります。スクリーンショット QA では低いしきい値を使用し、ハイライト表示された領域を目で確認します。