画像比較ガイド
目的に合う表示方法で画像を比較する
オンライン画像比較は、確認したい判断に合う表示方法を選ぶほど読み取りやすくなります。
このガイドでは、2つの画像枠、ブラウザ内プレビュー、実用的な4つの比較モードを扱います。
実例
ローカルのデモ画像で4つの比較モードを見る
各プレビューは実際のビフォーアフターペアを使い、どのレビューに向いているかを判断しやすくしています。
Image A
Image B
ステップ1
Image A と Image B から始める
元画像または変更前の画像を Image A に、変更後の画像を Image B に読み込みます。
同じ場面、デザイン、商品写真、スクリーンショットを表すファイルを使うと、比較結果を読みやすくなります。
- Image A: 元画像、変更前、基準、参照画像。
- Image B: 変更後、書き出し後、編集済み、または新しい画像。
- 対応形式: PNG, JPG, JPEG, WebP。
ビフォーアフター
画像比較スライダー
画像比較スライダーは、画像比較や比較画像の前後確認に向いています。
同じ表示領域で見た目の変化をめくるように確認したいときに使います。
全体画像
横並び画像比較
横並び画像比較では両方のファイルを同時に見ながら、写真比較やレイアウトの差を確認できます。
切り抜き、余白、構図を確認するために両方の画像を同時に見たいときに使います。
位置合わせ
重ね合わせ画像比較
重ね合わせ画像比較は、位置合わせ、色、トリミング、余白の変化を確認するための表示です。
単純な前後比較よりも、配置、拡大率、位置合わせを確認したいときに使います。
ピクセル確認
差分ハイライト
ブラウザ内のしきい値テスト後に変更ピクセルを赤で示します。
差分実行後に変更領域とローカルのピクセル指標を確認したいときに使います。
形式
対応している画像形式
現在のツールは PNG, JPG, JPEG, WebP ファイルに対応しています。最良の結果には同じ作業フローから出力した2枚を比較します。
非対応形式は比較前に変換してください。
読み込み済み画像
画像が読み込まれたか確認する方法
画像がアップロード欄に表示されれば、通常は読み込み成功です。画像ファイルが大きい場合は読み込みに時間がかかり、比較も遅くなることがあります。
用途
オンライン画像比較のよくある用途
編集、書き出し、スクリーンショットを受け入れる前に、視覚的な変更を明確に確認できます。
モード表
シンプルなモード表
| モード | 向いている用途 | 使う場面 |
|---|---|---|
| 画像比較スライダー | 画像比較スライダーは、画像比較や比較画像の前後確認に向いています。 | 分割線をドラッグして変更ピクセルの位置を文脈内で確認します。 |
| 横並び画像比較 | 横並び画像比較では両方のファイルを同時に見ながら、写真比較やレイアウトの差を確認できます。 | 計算済み差分指標を読む前に 2 枚を同時に比較します。 |
| 重ね合わせ画像比較 | 重ね合わせ画像比較は、位置合わせ、色、トリミング、余白の変化を確認するための表示です。 | 片方の画像を重ねて、位置、色、明るさのずれを見つけます。 |
| 差分ハイライト | 差分ハイライトは、ローカル差分を実行した後だけブラウザ内でピクセル差分を計算します。 | ブラウザ内のしきい値テスト後に変更ピクセルを赤で示します。 |
比較を開始