How to compare two images with a before and after slider
If you have ever tried to show someone the difference between two images by putting them side by side, you know the problem: your eyes have to jump back and forth, and anything subtle just disappears. A before and after slider fixes that by stacking both images in the exact same spot and letting you drag a divider across them. The difference stops being something you describe and becomes something you can see.
Here is the fastest way to do it, and a live example you can drag yourself.
Why a slider beats side by side
When two images sit next to each other, every pixel is in a different place, so your brain spends its effort matching positions instead of spotting differences. Stack them and drag a divider and both halves share the same coordinates. Now a shift in sharpness, a bit of color banding, or a smudged edge jumps straight out.
Here is a real one. On the left is a clean PNG. On the right is the same image saved as a heavily compressed JPEG. Side by side you might not notice much. Under a slider the banding in the sky and the blocky mess around the edges are impossible to miss:
That is the whole point. When the difference matters, a slider is the fastest way to show it.
How to make one in about ten seconds
- Get your two images. For the sharpest comparison, use two files of the same dimensions so nothing has to stretch.
- Open imgi.co, drop in your before and your after, and drag the divider. Mouse, touch, and keyboard all work.
- Add a label to each side so people know which is which.
- Click Publish and you get a permanent link you can paste anywhere, or grab an embed snippet for your own site. No account needed.
That is it. Two files, one drag, one link to share.
A few tips for a clean comparison
- Same crop, same size. If the two shots are not aligned, the slider will show the misalignment instead of the thing you care about. Line them up first.
- Fine detail is where differences live. Text, hard edges, hair, foliage, and smooth gradients are the first places quality loss shows up. Frame your comparison around those.
- Keep quality if quality is the point. If you are judging fine detail, you do not want the tool itself softening your images. imgi has an offline mode that compares two files entirely in your browser with nothing uploaded and nothing recompressed, so what you see is exactly your files.
If you used to use imgsli
imgsli was the go to tool for this for years, and its homepage has been dead for months now, just a “Site Under Construction” page. imgi is a free, modern replacement built to do the one thing imgsli did well: two images, a slider, a link you can share. If you landed here because your old comparison links stopped working, this is where to make new ones.
Ready to try it? Make your own comparison, free and with no signup.