A good before-and-after pair does more convincing in one glance than a paragraph of description ever will. Most trades businesses already have the photos on their phone. Where it usually goes wrong is in how they're captured and shown, not whether they exist.
Why this format works
A 2026 survey of 292 US homeowners who had hired a roofer, run by Roofr, found that 66% ranked professional proposals among their top three trust factors and 74% wouldn't hire without an inspection first, both signs that people want concrete proof before they commit to a home service purchase. A before-and-after photo is exactly that kind of proof, shown instead of described. See why we ask for your own photos for how to build a habit of capturing these on every job.
Match the shot, as closely as you can
The comparison only works if the two photos are actually comparable:
- Same angle and distance. Stand roughly where you stood for the "before" shot.
- Similar light, ideally the same time of day, so a shadow difference doesn't read as a quality difference.
- The same amount of frame, so nothing in one shot is cropped differently from the other.
A rough match still beats no before-and-after at all, but a careful match is what makes the change obvious without a caption doing the explaining.
How to lay them out on the page
- Side by side is the clearest format for a single pair. Left is before, right is after, labeled plainly.
- A slider (drag to reveal) is popular and looks polished, but it hides the "after" until someone interacts with it, and on a phone that interaction isn't always obvious. If you use one, make sure it's usable with a thumb, not just a mouse.
- Stacked, one above the other, works well on narrow phone screens where side-by-side gets too small to read clearly.
Whichever you choose, keep the pairs organized by project type (a roof replacement, a bathroom remodel, a panel upgrade), not dumped into one long, unsorted gallery.
Write real alt text for each photo
Alt text is the short written description that describes an image to someone using a screen reader, and it's also read by search engines that can't interpret the photo itself. The W3C's own accessibility guidance is direct on this: for an image that conveys real meaning, "use a brief description of the image in a way that conveys that meaning in the alt attribute." For a before-and-after pair, that means something specific like "Asphalt shingle roof before replacement, showing curling and missing shingles" and "Same roof after replacement with new architectural shingles," not a blank attribute or a generic "photo."
Keep the photos real
The comparison only works if both photos are honest: the same project, not a stock "after" photo standing in for your own work, and not an exaggerated "before" that makes ordinary wear look like a crisis. Beyond being the right thing to do, a customer who visits in person and doesn't see what the photos implied is a customer who won't refer you, whatever the sale ends up costing.
Don't let the gallery slow the page down
A page full of large, uncompressed photos can undo everything else you've done for speed. Save images at a reasonable file size for the web (a few hundred kilobytes each is usually plenty for a browser-viewed photo, not the multi-megabyte file straight off a phone) and let the page load the rest as someone scrolls to them, rather than all at once.
Questions
How many before-and-after pairs should I show?
A dozen well-chosen pairs, organized by project type, does more work than fifty unsorted ones. See why we ask for your own photos for how to build toward that number over time.
Should I caption each pair with details about the job?
Yes, briefly: the type of work, and roughly how long it took, if that's useful information for someone considering the same job.
What if a project doesn't have a clean before shot?
Skip it for this format rather than reconstructing one. A single strong "after" photo in your general gallery is better than a mismatched or misleading pair.