無料Webツール

画像比較スライダー

2枚の画像を重ね、スライダーでBefore / Afterを比較します。

入力と設定

使い方と確認ポイント

2枚の画像を同じ枠に重ね、境界スライダーを左右へ動かしてBefore / Afterを見比べます。加工前後やデザイン修正前後を目視確認するためのツールです。

  1. 画像Aと画像Bを選びます。2枚そろうと比較表示が自動で出ます。
  2. 「境界位置」スライダーを左右へ動かします。
  3. A/Bの切り替わり部分を見ながら、見た目の変化を確認します。
画像A
下側に表示
画像B
上側に重ね、スライダー位置まで表示
境界
0〜100%
出力
比較表示のみ。画像ファイルは生成しない

圧縮前と圧縮後を重ねると、劣化した場所を探しやすい

同じ写真の元画像をA、圧縮後をBにして境界を動かすと、髪の毛・文字・細い線など、差が気になる場所を左右で連続的に確認できます。

これは目視比較用です。ピクセル差を数値化するツールではありません。数値・差分画像が必要なら「画像差分ヒートマップ」を使ってください。

同じ構図・同じ比率の画像ほど比較しやすい

表示枠の中では両画像を object-fit: contain で収めます。構図や縦横比が違う2枚では、境界が同じ位置でも内容が一致しません。

スライダーはB画像の見える幅を変える

A画像を全面表示し、その上にB画像を重ねて、Bの表示幅だけを0〜100%で変えます。画像そのものを合成・編集しているわけではありません。

ファイル名と容量も確認できる

比較表示の下にA/Bそれぞれのファイル名とファイルサイズを表示します。見た目だけでなく、圧縮前後の容量確認にも使えます。

比較結果の画像保存はしない

このツールの役割はブラウザ上での見比べです。境界線入りの比較画像を書き出す機能はありません。