Image Comparison
A draggable, keyboard-accessible divider for comparing two aligned images.
- Category
- Direct manipulation
- Year
- 2026
- Status
- Experiment
Before / after comparison
Drag the handle, use the keyboard, or reset to compare both images.
What it is
Two visual states aligned inside one shared frame.
Image Comparison places one image above another and clips the upper image at the divider. Moving the divider reveals more of one state while hiding the same area of the other, making small differences easier to inspect.
The pattern works best when both images share the same dimensions and subject position. Unrelated images or mismatched crops weaken the comparison because the viewer must mentally align them first.
Design decisions
How the control keeps comparison direct and understandable.
One-to-one tracking
The divider follows the pointer across the image without an additional easing step. Pointer capture keeps the drag active even when the pointer leaves the handle or image bounds.
Shared frame
Both images occupy the same geometry. Only the visible width of the upper image changes, so the subject remains aligned throughout the interaction.
Keyboard control
The comparison surface uses slider semantics and responds to arrow, Home, and End keys. Holding Shift increases the arrow-key step for faster movement.
Adaptive labels
Before and after labels disappear when their visible region becomes too narrow. This prevents a label from covering the small part of the image someone is trying to inspect.