Web ToolBox

Image Compare Slider

Compare two images with a slider

For more serious image comparison, use PicDiff
See differences more clearly and share comparison results. PicDiff is a better fit when you want a more complete image comparison experience.
Compare with PicDiff

Compare Images

Drop file here

Drop file here

What is Image Compare Slider?

Image Compare Slider is a tool for overlaying two images and comparing them with a movable slider. It supports both horizontal and vertical comparison, and it also includes zoom and pan controls for checking smaller differences more closely.

It is useful for before-and-after design reviews, photo editing comparisons, UI diff checks, and other situations where you want to inspect visual changes side by side.

How to Use

  1. Load the first and second image.
  2. Choose horizontal or vertical comparison.
  3. Move the slider to inspect the difference.
  4. Switch to fullscreen if you want a larger comparison view.
  5. Turn on image details when you want to check file metadata for both images.

Once both images are loaded, you can switch between the compare view and the details view as needed.

Main Controls

Slider Comparison

Drag the slider to change how much of each image is visible. Switching between horizontal and vertical modes helps depending on the kind of difference you are checking.

Zoom and Pan

Drag the image area to pan, and use Ctrl or Meta plus the mouse wheel to zoom. This is useful when you want to inspect high-resolution images or look at small edits closely.

Keyboard and Reset

Use the arrow keys to fine-tune the comparison position, and press 0 to reset zoom, pan, and slider position.

Details You Can Check

When image details are enabled, the tool can show information such as:

  • file name
  • extension
  • width and height
  • file size
  • last modified date
  • orientation

This makes it easier to compare not only the visuals but also the basic file information behind each image.

Use Cases

  • Comparing a UI before and after a design change
  • Checking photo edits or filter results
  • Reviewing visual differences in a redesign or refresh
  • Comparing two exported versions of the same image in detail

Things to Keep in Mind

  • Images with similar dimensions and framing are easier to compare
  • Larger images benefit more from zoom and pan during review
  • Supported image formats depend on what the browser can load