How to use it
- Choose the Before picture and the After picture.
- Drag the divider left or right. The before picture is shown on the left of it, the after picture on the right.
- Use Swap pictures if you chose them in the wrong order.
How it works
Both pictures are stacked in one frame. The before picture is cut off at the divider position with a CSS clip, so no pixel is changed or resampled by the tool; the browser shows the pictures as they are. The position is a percentage of the frame width, 50 % at the start.
Worked example
Compare a photo before and after compression: put the original on the left and the compressed copy on the right, then drag across a detailed area such as hair or text to see where the quality drops.
Tips
- Use the same crop for both pictures so the divider compares like with like.
- Zoom your browser in to inspect fine detail.
- Check large differences with the image diff checker.