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.
Which businesses benefit most
- Renovation and building trades: kitchens, bathrooms, facades, floors, gardens.
- Cleaning services: carpets, terraces, cars, roofs.
- Beauty and wellness: hair, makeup, nails (check your local rules for medical or aesthetic treatments).
- Photographers and retouchers: raw versus edited images.
- Web designers and agencies: old website versus redesign.
- Restoration: furniture, cars, old photos.
Build a results gallery that ranks
Instead of one page with fifty sliders, create a short page or post per project: “Bathroom renovation in Toulon”, “Terrace cleaning in Hyères”. Each page gets a slider, two or three paragraphs describing the job (problem, solution, duration, materials) and a call to action. These project pages match local searches and give visitors concrete proof. Link them from your service pages and your home page.
Images and performance
Two large photos per slider can make a page heavy. Resize images to the display width (usually 1200 to 1600 pixels wide is enough), compress them, and use a slider that lazy-loads images below the fold. Fill the alt text of both images with a short description (“kitchen before renovation”, “kitchen after renovation”): it helps accessibility and image search.
Mistakes that kill credibility
- Different angles or zoom levels between the two photos.
- Very different lighting that suggests the result comes from editing.
- Stock photos presented as your own work.
- No context: the visitor does not know what was done or how long it took.
Add a client testimonial next to each project (see how to display testimonials) and try the effect on the Revealr demo.
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.