Image Comparison Slider
Upload two images and drag the divider to inspect before/after changes, compression quality, UI screenshots, or design revisions in one aligned preview.
Image comparison slider
Upload two images, then drag the divider to compare before/after changes in one aligned preview.
Use it for photo edits, compression checks, UI screenshots, product images, and design revisions. Images stay in your browser.
Before/After image comparison slider — drag to reveal the difference
The image comparison slider lets you upload two photos and drag a divider to reveal one side while hiding the other. Both images stay perfectly aligned in the same frame, making it easy to spot even subtle differences — unlike simply switching between two tabs or windows.
This is the same interaction style used by Lightroom, Photoshop's History panel, and tools like Squoosh. Upload a before and an after version of any image, then drag left and right to compare them at any specific spot — a face, a product detail, a background, or a UI element.
What you can compare
- Photo edits — Check retouching, exposure adjustment, color grading, or sharpening by placing the edited version on one side and the original on the other. Drag to the area that changed to verify the edit looks right.
- Compression quality checks — Upload the original and a compressed version to see whether the JPEG artifacts, detail loss, or color shifts are acceptable at your target file size. Pair this with Image Compressor.
- UI and design revisions — Compare before/after screenshots of a design change, a CSS tweak, or a layout update. Useful for design reviews and client presentations.
- Product image variations — Compare color variants, background changes, or cropping decisions before publishing to a store or campaign.
- Background removal quality — Check how clean the cutout edges are compared to the original. Use after Background Remover.
How to use
- Upload the left image (typically the "before" or "original").
- Upload the right image (typically the "after" or "edited" version).
- Drag the divider handle left and right to reveal each image progressively. Click anywhere on the preview to jump the slider to that position.
Privacy
Both images are loaded entirely in your browser. No uploads, no server, no data retention. Images stay on your device.
Related: Image Compressor (compress, then compare quality), Background Remover (remove, then compare edges), Crop Image.
FAQ
Do the two images need to be the same size?
No, but aligned comparisons work best when both images have the same dimensions. The tool overlays them in the same frame, so different sizes will show as different scales. For photo edits, export both versions at the same resolution before comparing.
Can I drag the slider to a specific percentage?
Yes. Drag the handle anywhere across the image preview. You can also click anywhere on the image to jump the divider to that horizontal position. The slider repositions instantly.
Is there a side-by-side mode without the overlay?
The tool uses an overlay/slider mode for pixel-accurate alignment. For side-by-side static comparison, you can open both images in separate browser tabs and switch between them.
What image formats are supported?
JPG, PNG, WebP, GIF, and any other format your browser can display as an element. HEIC may work on Safari/Chrome 110+.
Are my images uploaded to a server?
No. Both images are loaded and compared entirely in your browser. No data leaves your device.
Can I use this on mobile?
Yes. The comparison slider works with touch input on smartphones and tablets. Drag with your finger to reveal each side.
Will I lose image quality?
The tool balances file size and visual quality. For best results, start with the highest quality source image available.
Can I use this for business or client work?
Yes, but you should still verify important results and keep source files when the work affects billing, legal, or operational decisions.