How to Add Before and After Photos to Your Website

If you fix roofs, restore water-damaged basements, detail cars, or run a wellness studio, your finished work is your best salesperson. A visitor who can see a sagging gutter become a clean straight line, or a stained ceiling turn bright white again, does not need a paragraph of copy to believe you. That is why learning how to add before and after photos to your website is one of the highest-return hours you can spend on your online presence.

Most guides on this topic jump straight to a WordPress plugin and stop there. This one starts earlier, with the part that actually decides whether the photos work: shooting matched pairs, organizing them, choosing how to display them, and making them fast and findable. Whether you use a plugin, a builder, or a done-for-you tool, the fundamentals below are the same.

Why before and after photos convert so well

People trust what they can verify. A written claim like "we deliver quality work" asks the reader to take your word for it. A side-by-side image lets them judge for themselves in about a second. That shift, from asking for trust to letting someone verify, is the whole reason these photos pull their weight.

They also do a quieter job. A strong pair sets expectations. Someone who sees the standard of your finished work before they call is a warmer, better-qualified lead. They are not shopping on price alone anymore. They are picturing that result on their own home.

Step 1: Shoot photos that can actually be compared

The single biggest mistake is treating the "before" as an afterthought. You remember to photograph the finished job, but the only "before" you have is a blurry phone shot taken in bad light from a different angle. The pair does not line up, and the comparison falls apart.

Consistency is what makes a before and after believable. Aim for these every time:

Same angle and distance. Stand in the same spot for both shots. Note a landmark, like a corner of the driveway or a floor tile, so you can return to it. A phone tripod with a small floor marker makes this repeatable.
Same framing. Keep the same amount of the scene in view. If the "before" shows the whole roof and the "after" shows one corner, the eye cannot connect them.
Same lighting. Shoot at a similar time of day, or use the same work light. Harsh midday shadows in one photo and soft evening light in the other make an honest result look staged.
Same orientation. Both photos landscape, or both portrait. Mixing them forces one image to be cropped and throws off the alignment.
Steady and in focus. Wipe the lens, tap to focus, and hold still. A sharp before against a sharp after reads as careful work.

A practical habit: take the "before" the moment you arrive on site, before you touch anything. Make it part of your setup routine, the same as putting down drop cloths. You will never again lose a great case study because you forgot the starting point.

The photo pair is not decoration. It is evidence. Shoot the "before" like it matters, because on your website it does.

Step 2: Do not over-edit

A little brightness and straightening is fine. Heavy filters, saturation boosts, or anything that changes the actual result crosses a line. Buyers have seen enough fake transformations to be suspicious, and one photo that looks too good to be true makes them doubt all the others.

Keep both images edited the same way. If you brighten the after, brighten the before by the same amount. The goal is an accurate comparison, not a beauty contest. Honest and clear beats dramatic and doubtful every time.

Step 3: Get permission before anything goes public

This step gets skipped and it should not. If the work is on someone's property, or the photo shows the inside of a home, a body, a face, or anything identifiable, ask before you publish. For home services, a quick line on your work order or a follow-up text is enough: may we use photos of the finished job on our website and social media. For wellness, health, or anything personal, get it in writing, and treat a verbal yes as not enough.

Framing helps. Most customers are happy to be shown off when you present it as pride in the result rather than a favor you are asking. Keep a simple record of who said yes so you never have to guess later.

Step 4: Choose how the photos will appear

There are three common ways to show a pair, and the right one depends on the work and the device.

Interactive slider. A single image with a handle in the middle that the visitor drags left and right to wipe between before and after. It is engaging and works beautifully when the two photos line up almost perfectly, like the same wall or the same roofline. It demands well-matched pairs, or the wipe looks off.
Side-by-side pair. Two images next to each other with clear labels. Simpler, faster to load, and forgiving when the angles are not a perfect match. On a phone the two images usually stack, so make sure each one still reads on a small screen.
Grid or gallery. A set of pairs on a dedicated results or gallery page. This is where you build a body of proof over time. Group by job type so a roofing lead sees roofing and an HVAC lead sees HVAC.

If you are just starting, side-by-side pairs are the safe choice. They are easy to get right, they load quickly, and they never leave a visitor confused about which image is which. Add a slider later for your very best matched pairs.

Step 5: Label every pair

An unlabeled comparison makes the visitor do work, and confused visitors leave. Mark which image is before and which is after, and add one line of context.

Specific labels beat generic ones. "Before" and "after" is the floor. "Storm damage, repaired in one day" or "Water extraction and full restoration, three days" tells a story and answers the question forming in the reader's head: how long, how much disruption, what exactly changed. A short caption is often the difference between a nice photo and a photo that books a call.

Step 6: Optimize the images so the page stays fast

Big image files are the quiet killer of these pages. A gallery full of photos straight off a phone can be tens of megabytes, and on a phone connection that page may take several seconds to appear. Many visitors leave before they ever see your work. Speed matters for search rankings too.

Do these before you upload:

Resize. You rarely need an image wider than about 2000 pixels for the web. Shrink the dimensions first.
Compress. Run photos through a free compressor, or export as a modern format like WebP. You can usually cut the file size by half or more with no visible drop in quality.
Aim low. A single web photo under roughly 300 kilobytes is a good target. Lighter is better, as long as it still looks sharp.
Lazy load. Most modern websites and builders load images only as the visitor scrolls to them. If yours offers this, turn it on so the top of the page appears in under 3 seconds.

Step 7: Write alt text for every image

Alt text is the short written description attached to an image. It matters for two reasons. It is what a screen reader announces to a visitor who cannot see the photo, so it is a basic accessibility requirement. And it is one of the ways search engines understand your images, which can bring you traffic from image search.

Write it plainly and describe what is shown. Something like "before and after of a moss-covered asphalt roof cleaned to bare shingles" does the job. Skip keyword stuffing. One honest sentence per image is enough. Do this for both the before and the after.

Step 8: Put the pairs where decisions happen

A gallery page is good, but the highest-value spots are the pages where someone is close to calling. Drop a relevant pair onto your homepage near your main call to action, and onto each individual service page. A visitor reading your roof replacement page should see a roof replacement result right there, not have to hunt for a separate gallery.

Refresh the set as you finish new jobs. A results section that visibly grows tells visitors you are busy and consistent, which is its own quiet proof.

Common mistakes to avoid

Only having an "after" and no matching "before."
Different angle, zoom, or lighting between the two shots.
Publishing a customer's home or face without asking.
Huge files that make the page crawl on a phone.
No labels, so the visitor cannot tell which is which.
One dramatic pair and nothing else, which reads as a fluke rather than a standard.

If you would rather just describe it and have it done

Everything above assumes you are the one placing images, tuning the slider, resizing files, and writing alt text. That is very doable, and for many owners a plugin or builder handles it fine. But it is also an evening you might not have.

This is the part Saynovo is built to remove. Instead of wrestling with a plugin, you tell your site what you want in plain language, something as simple as add a before and after section to my roofing page with these two photos, and the change happens. Your site is generated from your existing business information, and edits are made by talking to it rather than by learning an editor. If handling the images, labels, and layout yourself sounds like one task too many, having the site do it on request is worth a look at saynovo.com.

How to add before and after photos to your website: the short version

The mechanics of how to add before and after photos to your website are easy once the groundwork is solid. Shoot matched pairs with the same angle and light, keep the editing honest, get permission, label each pair with real context, compress the files, write alt text, and place the results on the pages where people decide to call. Get those right and the display method, whether a slider, a side-by-side, or a gallery, is the simple part. Your finished work will do the selling, which is exactly what it should be doing.