No upload, 100% local, no account

Image Comparison

Load two images and compare them with a drag slider or side-by-side view. Perfect for before/after edits. No upload.

How Image comparison slider works

Image Comparison Slider lets you load two images side by side and drag a vertical divider to reveal more of one image and less of the other. This before-and-after layout is a direct, low-friction way to show the difference between two versions of an image. Both images are loaded from your local disk using the File API and rendered on screen by the browser; nothing is uploaded to a server.

The slider uses a CSS clip-path approach so the transition between the two images is always pixel-aligned and there is no blending or interpolation at the boundary. You can also switch to a split-screen view that shows the two images in fixed left and right panels. The tool is useful for comparing photo edits, compression results, design iterations or any two images where you need to see differences clearly.

Written by Bastien Sulyan

How to use Image comparison slider, step by step

  1. Drop the first image (the 'before' version) onto the left upload area.
  2. Drop the second image (the 'after' version) onto the right upload area.
  3. Drag the divider left and right to reveal more of one image at a time.
  4. Switch to split view to see both images in fixed panels if you prefer a static comparison.
  5. Use the full-screen button to maximise the comparison for detailed inspection.

Common use cases

  • A photographer compares the original RAW export with a retouched version to evaluate how much the edit changed the image.
  • A developer checks a before-and-after pair of compressed images to assess whether quality loss at a given compression level is acceptable.
  • A UX designer presents a UI redesign by placing the old interface screenshot on the left and the new one on the right for a stakeholder review.
  • A content editor verifies that an image manipulation (colour grading, cropping) is consistent between a thumbnail and a full-size version.

Frequently asked questions

Do the two images need to be the same size?

The tool works best when both images have the same dimensions, because the slider overlays them exactly. If the images differ in size, the tool scales them to a common display size. Some misalignment may appear at the edges if the aspect ratios are different.

Are the images sent anywhere for the comparison to work?

No. Both images are loaded from your filesystem via the File API and drawn into Canvas elements in your browser. The comparison is a client-side rendering operation. Neither image leaves your device.

Can I compare images from two different URLs rather than local files?

The current tool accepts local files only. Loading images from remote URLs would require the browser to fetch them and would be subject to CORS restrictions that many image hosts do not permit.

Is there a maximum image size the comparison can handle?

The limit is your browser's Canvas memory. Images up to around 20 megapixels each are handled without issue on most desktop devices. Very large images may slow the rendering or cause a memory error on low-end hardware.

Can I save a screenshot of a specific slider position?

Your operating system's screenshot tool (or the browser's screenshot feature in DevTools) is the straightforward way to capture a particular slider position. The comparison view itself does not have a built-in export button for a merged image.