Do the images need to be the same size?

No, but identical sizes produce the most accurate visual comparison. If sizes differ, both images are scaled to fit the preview container with their aspect ratios preserved, which can create alignment offsets.

Can I save the comparison as an image?

Not directly — the comparison view is a live interactive element. To save a specific split as an image, take a browser screenshot with the slider positioned where you want it.

Are my images uploaded?

No. Both images are loaded as local object URLs using URL.createObjectURL() and rendered directly in the browser. No data leaves your device.

guide

How to Compare Two Images Online — Free Slider Tool (2026)

By Rui Barreira · Last updated: 18 June 2026

Comparing two images side by side helps you spot differences in design iterations, before/after photo edits, UI screenshot comparisons, or any scenario where you need to see two versions of a visual together. brevio Image Comparison provides a draggable slider divider that lets you reveal either image interactively — no uploads, no server, entirely in your browser.

How to compare two images online

Open brevio Image Comparison. No account required.
Upload the Before image using the left file input. JPG, PNG, WebP, GIF, and any format your browser supports are accepted.
Upload the After image using the right file input.
Drag the slider left and right across the comparison view to reveal more of the Before or After image. The slider handle can be dragged with a mouse or a finger on touch screens.
Use the range input below the viewer to set the divider to a precise percentage if you need an exact split.

How the comparison slider works

Both images are stacked using CSS absolute positioning. The Before image sits on the bottom layer and is always fully visible. The After image sits on top and uses a CSS clip-path: inset(0 X% 0 0) property, where X is calculated from the slider position. Moving the slider left increases X, hiding more of the After image; moving it right decreases X, revealing more. A vertical divider line and a circular handle button mark the boundary. The technique requires no JavaScript canvas compositing — it is purely CSS-driven, which means it is smooth and GPU-accelerated.

Common uses for image comparison

Photo editing: Compare the original and edited versions of a photo to evaluate color grading, sharpening, or retouching changes.
UI design reviews: Show a before/after of a design change to stakeholders in a compelling, interactive way.
Website redesigns: Compare screenshots of old and new versions of a page layout.
Real estate and architecture: Before/after renovation comparisons for presentations or listings.
Medical imaging (non-diagnostic): Visual comparison of non-clinical reference images for educational purposes.
AI image generation: Compare an original photo with an AI-generated variation to evaluate fidelity.

Tips for best results

The comparison works best when both images have the same aspect ratio and subject framing. If your images have different dimensions, the browser will letterbox or pillarbox them within the 16:9 preview container using object-fit: contain — the comparison slider still works, but the framing may not be perfectly aligned. For pixel-accurate comparisons of screenshots or UI mockups, crop both images to identical dimensions before uploading.

Frequently Asked Questions

Do the images need to be the same size?: No, but identical sizes produce the most accurate visual comparison. If sizes differ, both images are scaled to fit the preview container with their aspect ratios preserved, which can create alignment offsets.
Can I save the comparison as an image?: Not directly — the comparison view is a live interactive element. To save a specific split as an image, take a browser screenshot (Cmd+Shift+4 on Mac, Win+Shift+S on Windows) with the slider positioned where you want it.
Are my images uploaded?: No. Both images are loaded as local object URLs using URL.createObjectURL() and rendered directly in the browser. No data leaves your device.

Frequently Asked Questions

Do the images need to be the same size?: No, but identical sizes produce the most accurate visual comparison. If sizes differ, both images are scaled to fit the preview container with their aspect ratios preserved, which can create alignment offsets.
Can I save the comparison as an image?: Not directly — the comparison view is a live interactive element. To save a specific split as an image, take a browser screenshot with the slider positioned where you want it.
Are my images uploaded?: No. Both images are loaded as local object URLs using URL.createObjectURL() and rendered directly in the browser. No data leaves your device.