Detailers, painters, landscapers, renovators, groomers, restorers: if your work changes how something looks, your website lives or dies on its before and after gallery. And most of those galleries bury the evidence. The two standard patterns both fail quietly, in ways their owners never see because they already know what they’re looking at. Visitors don’t.
The two standard galleries, and how they fail
Pattern one is the stitched composite: before and after glued into a single image, side by side, usually with an arrow. It survives anywhere an image survives, which is its one virtue. But it forces both photos to half width, so the detail that justifies your price shrinks to thumbnail scale, and the viewer’s eye has to shuttle between the halves doing its own comparing. Small differences, which is to say skilled work, evaporate.
Pattern two is the carousel of befores and afters in sequence. Now each photo gets full width, but the viewer compares against their memory of two slides ago, and memory smooths everything toward the middle. There’s a longer argument about when carousels earn their spot, but for transformation work the answer is roughly never.
What both patterns miss: the visitor never sees the before and the after in the same place at the same time. That’s the entire job.
The pattern that works
A draggable before and after slider per project, embedded in a grid. Both photos at full size, stacked in the same frame, the visitor in control of the reveal. Someone who’s dragged your driveway from moss to clean has interacted with your work, and interaction sticks in a way scrolling doesn’t. It’s the difference between showing a stranger a photo and handing them the photo.
Building it takes no plugin and no code. For each project, upload the pair at imgi.co, label the sides (dates read better than before and after for long jobs), publish, and paste the one-line embed into your page. The embed guide walks through the per-platform quirks, WordPress to Squarespace to Wix, including which plans allow iframes at all.
Two structural tips for the grid itself:
- Feature three to five embedded sliders, your best and most varied work, rather than embedding all thirty jobs. Each iframe loads lazily so the page stays fast either way, but choice fatigue is real, and a page of thirty identical widgets reads as wallpaper.
- Put the rest in albums, one per project or per job type, linked from the gallery page. An album holds several comparisons under one link, so a full kitchen renovation lives at one URL with every angle inside it. Your gallery page stays a tight highlight reel with depth one click away.
Photos worth putting under a handle
A slider is honest to a fault: it aligns your photos in the same pixels and shows every mismatch. That’s a feature, because a matched pair reads as proof while a mismatched one reads as marketing, but it means the photography has to hold up. The lining-up guide covers the craft in full; the compressed version is to match position, height, lens, and time of day, and to take the before photo like it’s the most important shot of the job. It is. The after can be reshot tomorrow. The before is gone the moment work starts.
Crop both files to identical dimensions before uploading. And keep originals somewhere safe, because a gallery you build once becomes a sales asset you’ll reuse in proposals, social posts, and ads for years.
The parts everyone forgets
Consent, first. If the transformation involves someone’s property, face, or pet, get the okay to publish before the pair goes on your site. A one-line clause in your standard paperwork handles it forever, and retrofitting permission is an awkward email nobody enjoys sending. For jobs you can’t publish, private uploads exist; the comparison still works in proposals without living on the open web.
Second, the offsite versions. The same comparison that lives on your gallery page exports as a GIF or MP4 for social posts, where embeds don’t run but a transformation playing on loop stops thumbs mid-scroll. One upload, every format, and they all stay in sync because they’re all the same comparison.
Third, the link itself. Each published comparison has a permanent URL, which quietly turns your gallery into a quoting tool. A prospect on the phone asking about patio work gets the patio album link mid-call. That might be the real payoff of doing the gallery properly: not the page itself, but every job you’ve ever finished being addressable by link, thirty seconds after someone asks about patios.
Start with your best job, give it a slider, and build the grid out from there.
The cover collage for this post includes a capture pair from Enhanced textures detail (UV-tweaks) by Some_Random_Guy_83.