Renovations, haircuts, cleaning, landscaping, photo retouching, dental work: when your job is to transform something, the best proof is the transformation itself. A before / after slider lets visitors drag a handle and see the difference with their own eyes.
Tips for great before / after photos
- Same angle, same framing: use a mark on the floor or a tripod.
- Same light when possible, or the comparison looks unfair.
- Same size and ratio for both images.
- Compress the images so the slider loads quickly on phones.
Where to use sliders
- On the home page, with your most impressive project.
- On each service page, with a relevant example.
- In a portfolio or case study, with a short story about the project.
Step by step
- Install Revealr.
- Add the “Before / After” block and pick your two images.
- Choose horizontal or vertical comparison, the image ratio and the labels.
- Optionally enable the intro animation that slides the handle when the slider comes into view.
Drag the handle on the live kitchen renovation demo. The slider is also keyboard accessible and uses about 3 KB of JavaScript.
Make results even more credible
Put a client testimonial right below the slider, and show the people behind the work with a team page.
Frequently asked questions
What image size should I use?
Use the same size and ratio for both images, around 1600 pixels wide, compressed for the web.
Is the slider accessible?
Yes. It can be used with the keyboard and is announced as a slider to screen readers.
Can I compare top and bottom instead of left and right?
Yes, choose the vertical orientation.