Before / After Image Compare

The Image Compare tool places an original and a processed image behind a draggable slider, showing their sizes and the difference. It is for judging the visual cost of compression or edits.

Numbers alone do not show whether compression hurt an image. A side-by-side slider reveals the visual difference, with both images kept on your device.

1. Load the original image.
2. Load the processed version.
3. Drag the slider to reveal one image over the other.
4. Check the sizes and the reported difference.
5. Decide whether the trade-off is acceptable.

• Draggable before-and-after slider
• Size display for both images
• Difference indication
• Runs in the browser — Before / After Compare

• Judging whether compression damaged an image
• Comparing two edits side by side
• Showing a client the effect of optimisation
• Checking a resize against the original

• Compare images at the same dimensions for a fair view.
• Inspect detailed areas at full size, where compression shows most.
• Balance the visual difference against the size saving before deciding.

• Comparing images at different dimensions, which makes the slider misleading.
• Judging quality on a small preview rather than at full size.
• Ignoring the size figures when weighing the visual trade-off.