画像の比較スライダー
2枚の画像を重ね、スライダーで境界を動かして見比べます。左右・上下の切り替え、サイズ違いの合わせ方、違うピクセルの強調と差分の割合の計算もできます。
画像A（基準） サンプル画像を表示しています
画像B（比べる相手） サンプル画像を表示しています
ここへドラッグ＆ドロップ、または Ctrl+V（⌘+V）で貼り付けても入れられます。2 枚まとめてドロップすると A と B に入ります。
表示
サイズが違うとき
境界の向き
R・G・B・透明度のどれかの差がこの値を超えたピクセルを「違う」と数えます。0 にすると 1 でも違えば数えます。
画像を読み込んでいます…
- 差があったピクセル —
- 全体に占める割合 —
- 最大の差（0〜255） —
- 比較したサイズ —
補足
- 画像はブラウザ内で読み込むだけで、アップロードは行いません。
- 境界はドラッグのほか、境界にフォーカスして矢印キー（1%）、PageUp / PageDown（10%）、Home / End で動かせます。
- サイズが違う 2 枚は、選んだ側（面積で判定）の大きさに揃え、もう一方は縦横比を保ったまま中央に収めます。縦横比が違うと余白ができ、その余白も差分として数えます。
- 長辺が 4096px を超える画像は、処理が重くならないよう縮小してから比べます。
- 拡大・縮小した画像どうしは補間のせいで細かな差が出ます。しきい値を上げると無視できます。
- 読み込める形式はブラウザによります（PNG・JPEG・GIF・WebP はほぼすべてのブラウザで読めます。HEIC は多くのブラウザで読めません）。
よくある質問
画像はサーバーへアップロードされますか？
されません。画像はブラウザ内で読み込み、canvas に描いて比べるだけです。比較結果の PNG もその場で作って保存します。
サイズが違う2枚でも比べられますか？
比べられます。「小さい方に合わせる」か「大きい方に合わせる」を選ぶと、面積で選んだ側の大きさに揃え、もう一方は縦横比を保ったまま中央に収めます。縦横比が違うと余白ができ、その余白も差分として数えます。
差分の割合はどうやって数えていますか？
同じ位置のピクセルどうしで R・G・B・透明度の差を求め、そのうち最大の差がしきい値を超えたピクセルを「違う」と数えて、全ピクセルに対する割合を出します。しきい値の既定は 16 で、0 にすると 1 でも違えば数えます。JPEG の圧縮ノイズや拡大・縮小の補間で出る細かな差は、しきい値を上げると無視できます。
キーボードだけで操作できますか？
できます。比較画像にフォーカスを移し、矢印キーで 1%、PageUp / PageDown で 10%、Home / End で端まで境界を動かせます。スクリーンリーダーには「左 30% が画像A、右 70% が画像B」のように今の位置を伝えます。
位置がずれた画像や、回転した画像の違いも分かりますか？
分かりません。同じ座標のピクセルを比べるだけなので、少しでも位置がずれると全体が違うと判定されます。位置合わせや回転の補正は行いません。