3つの表示で使えるプライベート画像比較

01

同じ基準フレームで画像比較を行う仕組み

画像比較 — 並列・スライダー・ピクセル差分で共通の形状を使用

元画像と変更後の画像を1枚ずつ選びます。画像比較では両方をローカルでデコードし、共通フレームを計算して、切り抜かずに縦横比を保って配置します。元のサイズや比率が異なっていても、3モードで同じ基準を使えます。

画像比較 — 並列表示は構図全体の変化に向いています。スライダーは2つのフレームを重ね、境界まで変更後を表示します。差分表示は両方のRGBAピクセルを読み、色チャンネルの平均変化が指定したしきい値を超える箇所を強調します。

画像比較 — 差分率は正規化されたフレームの測定値であり、品質や意味を判定する点数ではありません。拡大縮小、圧縮、アンチエイリアス、色プロファイル、1ピクセルの位置ずれでも多くの値が変わります。測定と目視、元ファイルの文脈を組み合わせて判断してください。

• 画像比較 — レイアウト、商品、ビフォーアフターは並列表示で確認します。
• 画像比較 — 同じ領域の変化はスライダーで確認します。
• 画像比較 — 差分表示は変更ピクセルの場所を示し、原因までは説明しません。
• 画像比較 — 現在の表示とラベルをPNGとして保存できます。

02

目的に合う画像比較モードを選ぶ

画像比較 — 視覚的な説明とピクセル監査では必要な表示が異なる

画像比較 — 商品画像は正面、側面、細部、尺度をグリッドにできます。サポート報告はエラーと再現手順を縦に並べ、デザイン比較は同じ背景と間隔で横に配置すると読みやすくなります。

03

画像比較 — プライベート画像をブラウザー内に保つ

画像比較 — ローカルAPIで処理用アップロードを避ける

画像比較 — ブラウザーは利用者が選んだファイルだけを読み込み、互換形式をデコードしてローカルCanvasへ描画します。アカウント、遠隔処理、有料APIは不要で、主要処理中にMergeImageへ送る元画像は0件です。

04

画像比較 — 読みやすい比較結果を出力する

画像比較 — ラベル、背景、フレーム形状を表示に残す

PNGは文字、UI、透過背景に向きます。JPEGは写真の容量を抑えやすい一方で非可逆圧縮となり透過を保持できません。WebPは受け取り先が対応していれば品質と容量のバランスを取りやすい形式です。

05

画像比較ツールの検証方法

画像比較 — 公式APIと再現可能なピクセルテスト

MDNはcreateImageBitmap()を画像ソースから非同期にビットマップを作る方法、canvas.toBlob()をCanvasからエンコード済みBlobを作る方法として説明しています。W3C File APIは選択ファイルの仕組みを定義します。

06

画像比較 — 最初に読む順番を決める

画像比較 — レイアウトは画像の物語に合わせる

画像比較 — 画像結合は最初に順番を決めます。キューが完成時の並びを示し、元ファイルを書き換えずに移動または削除できます。横並びは比較、縦並びは手順、グリッドは一覧、スマート長尺は連続するスクリーンショットに適します。

画像比較 — 元サイズの維持、幅合わせ、高さ合わせ、均等セルから用途に合う方式を選びます。間隔、配置、背景は書き出し前に計算されるため、プレビューで向き、順番、余白の誤りを確認できます。