Before and After Gallery: How to Build One That Wins Clients

by | Nov 8, 2026 | Blog | 0 comments

A before and after gallery is a page on your website that shows the same subject before and after your work, so visitors can judge your results in seconds instead of taking your word for it. It suits any business whose results are visible: med spas, dentists, plumbers, home contractors, landscapers, venues. A good one needs the right photos, a layout that works on a phone, written consent from anyone identifiable, and captions that make no promise you cannot back up.

This guide covers each of those, plus when to use a draggable slider and when a plain grid is the better choice.

IBrand Media
ibrand.media
Showcase Your Work Online
IBrand Media helps small businesses strengthen their online presence with web design and digital marketing tailored to their goals.
Explore digital marketing services

TL;DR

  • A gallery is visual proof of a transformation. It works best for services where the result can be seen.
  • Use a slider for a few standout pairs and a grid for volume. Whatever you choose, it has to work on a phone and with a keyboard.
  • Shoot every pair with the same angle, lighting and framing, and add a short caption that explains what was done and how long it took.
  • Get written consent before you publish photos of people. For med spas, identifiable photos can count as protected health information.
  • Keep captions truthful. The FTC treats images as part of the claim your ad makes.

Table of Contents

The idea is simple. You pair an image of the starting condition with an image of the finished result. Businesses use them as visual proof of a transformation that helps visitors evaluate changes quickly and feel less uncertain about what you can deliver.

That matters most when the buyer cannot judge quality from a description. Nobody can tell from “we renovate bathrooms” whether your tile work is clean. A pair of photos answers the question in a glance.

Here is how different businesses use the format:

  • Med spas and dental practices: treatment results, usually grouped by procedure.
  • Home service and contracting businesses: a stained deck, a rebuilt kitchen, a replaced roof, a cleaned HVAC unit.
  • Venues and banquet halls: an empty room next to the same room set for a wedding or corporate event.
  • Landscapers, painters, detailers, cleaners: the most natural fit of all, since the change is dramatic and instant.

If your service produces no visible change, a gallery is the wrong tool. Case studies or reviews will serve you better, and our guides on business testimonials and social proof cover those.

Slider, side-by-side or grid: which layout to use

The search term “before and after slider” refers to one particular layout: a single image with a draggable divider. The “before” sits on one side of the line and the “after” on the other, and the visitor drags the line to reveal the change. A gallery is the wider concept, a page or section holding many such pairs. A slider can be one way of displaying each pair inside it.

There are three common layouts.

Layout Best for Watch out for
Draggable slider One or a few strong, well-aligned pairs Needs precise alignment; depends on a drag gesture
Side-by-side pair Simple, fast-loading proof Images get small on phones
Grid of cases Showing volume and variety Can become a wall of thumbnails with no story

One design guide recommends the draggable slider when you have one strong, well-aligned pair. It positions side-by-side as simpler and less dependent on gestures, and a grid of cases as the way to show volume. Another argues that sliders work because dragging the divider makes visitors discover the change themselves, which can make the comparison more memorable.

Our practical take for a small business:

  1. Put a slider on your home page or service page, using your single best pair.
  2. Build a dedicated gallery page using a grid of thumbnails that open into larger side-by-side pairs, filtered by service.
  3. Link to that page from your main menu. A gallery buried three clicks deep does not get seen. One guide for treatment practices says the gallery should have a direct menu link to cut the number of clicks to it.

What to photograph and how

The layout is the easy part. The photos decide whether the gallery persuades.

Keep the conditions identical

A before and after pair is only credible when the only thing that changed is your work. Match these every time:

  • Camera position, height and angle
  • Distance and framing
  • Lighting and time of day
  • Background and, for rooms, the lens width
  • For people, expression, posture and clothing

Mark the camera spot on the floor or note it in the job file so the crew can repeat it. Crew members shooting “after” photos from memory are the most common reason pairs look mismatched.

Show range, not only your best jobs

Visitors respond to cases that look like their own. For treatment galleries, one guide says to include clients of different genders, ages, body types and skin tones because prospects react better to someone they can identify with. The same logic applies to home services: show a small galley kitchen as well as the large showpiece, a rental-grade fix as well as the luxury one.

Compact renovated galley kitchen with practical finishes

Write a caption for every pair

A caption turns a picture into evidence. Include:

  • What was done (the service or procedure)
  • How long it took or how many visits
  • Anything the viewer needs to interpret the result

A treatment example from one medspa guide is a caption like “Results after 3 CoolSculpting sessions over 6 weeks”, which helps people understand timelines. For a contractor the equivalent is “Deck refinished in two days: power wash, sand, two coats of stain.”

Organize by what visitors are shopping for

Group by service, not by date. Someone looking for a bathroom remodel should not scroll through gutters. Short filter buttons above the grid do the job.

Make it work on a phone

Most local searches happen on a phone, so mobile is where your gallery earns or loses the lead. One benchmark report from a salon and spa software provider found that 97% of medspa clients prefer booking on mobile. That figure comes from the medspa industry, but the lesson carries over: your gallery has to be just as smooth on a smartphone as on a desktop.

Practical rules:

  • Side-by-side images get tiny on a narrow screen. A common fix is a “Before / After” switch that shows one photo at full width and flips on tap.
  • Make tap targets and slider handles large enough for a thumb.
  • Compress images so the page loads quickly on a cellular connection. Large uncompressed photos are the usual cause of a sluggish gallery.
  • Keep the call to action (call, book, request a quote) visible near the images, not only at the bottom of the page.
  • Do not make the slider the only way to see the result. Swiping the page and dragging the slider can conflict on a touch screen, so offer a tap alternative.

If you want a broader checklist for the site around the gallery, our guide to website design basics for local businesses and our list of best website design practices cover layout, speed and navigation.

Accessibility: sliders that everyone can use

A drag-only slider locks out anyone who navigates by keyboard or assistive technology. It is also a risk you can avoid in an afternoon.

The Web Content Accessibility Guidelines say that all functionality should be operable through a keyboard interface, without needing specific keystroke timings. For a slider, that means the handle must be reachable with the Tab key and movable with the arrow keys.

For components with interactive behavior, the W3C’s carousel guidance recommends providing control buttons and a predictable keyboard focus order. Apply it like this:

  • Give the slider handle a visible focus outline.
  • Add a text label such as “Before and after comparison: bathroom remodel”.
  • Write alt text for each image that says what is shown (“Cracked, stained bathroom tile before remodel”).
  • Offer buttons for “Before” and “After” as an alternative to dragging.

These steps also help your search visibility, since descriptive alt text and captions give search engines readable context for the images. Our guide to optimizing websites for search explains the wider picture.

This is the part many small businesses skip, and it is the part that can cause real trouble. The guidance below is general information for U.S. businesses, not legal advice. Talk to an attorney, and for health services your state licensing board, about your specific situation.

If a person can be recognized, get their permission before you publish. For medical-type practices, the stakes are higher. One medspa guide says that patient photos fall under protected health information under HIPAA if they are even remotely identifiable, which can include a tattoo, unique jewelry, a visible scar or a birthmark. It advises written consent that specifies where and how the image may be used and for how long, and that lets the patient revoke it at any time.

A workable consent form covers:

  • Which photos are covered
  • Where they may appear (website, social media, ads, print)
  • How long you may use them
  • How the person can withdraw consent, and what you will do when they do
  • Whether the face will be cropped or blurred

Home service businesses should apply the same habit to customers’ homes. A photo showing a house number, a street sign, a family portrait on the wall or a license plate can identify someone. Crop it or ask first.

Keep the claims truthful

A gallery is advertising, and advertising rules apply. The Federal Trade Commission says that online ad claims must be truthful and substantiated, and that businesses must consider both express and implied claims.

Images are part of that. In its health products guidance, the FTC tells marketers to consider the net impression of the entire ad, including pictures, and gives the example that a before-and-after picture can reinforce an implied claim when it shows dramatic improvement consistent with the product claim.

In plain terms:

  • Do not retouch, filter or change the lighting between the pair to exaggerate the result.
  • Do not feature only your most extreme outcomes without making clear they are not typical, if your claims suggest anyone can get them.
  • Do not caption a photo with a result the work did not produce.
  • Keep proof of what was done, when, and for whom.

Treat customer results as testimonials

When a gallery includes customer quotes or star ratings, those fall under the FTC’s rules too. The agency’s guidance notes that testimonials and endorsements function as advertising messages and are regulated as such. Use real customers, real words and results you can stand behind. Our article on the role of testimonials in marketing and our guide to getting client reviews show how to collect them properly.

Photo quality matters for trust as well. Online stores face the same issue in a different form, and this breakdown of product photo conversion problems shows how images that fail to inform or reassure cost sales. The same discipline applies to your gallery: clear, honest and consistent images.

Perspective

Most small business owners we talk to already have the best marketing asset sitting on a phone: photos of finished work. What they lack is a way to turn those photos into a page that brings in calls.

We see the same pattern across med spas, home service companies and venues. The gallery is treated as an afterthought, a folder of thumbnails with no captions, buried in the footer. Visitors never find it, and when they do, it does not answer their question: “Can they do this for me?”

Our approach is to treat the gallery as part of the whole customer path. It is designed for phones first, sorted by the services people actually search for, and placed next to the reviews and the contact options. It should sit on a site that is found in local search, and it should be easy to update after each job. We build custom plans because a dentist, a plumber and a banquet hall do not need the same gallery.

Our advice: start with ten strong pairs, caption them honestly, get consent in writing, and refresh the page every month. A small, current, truthful gallery beats a big, stale one.

TONY

A gallery only pays off if people reach it and can use it on any device. At IBrand Media we offer web design and website development, SEO optimization, local marketing, content creation and graphic design for small and local businesses, each with a custom plan. That covers the pieces a gallery depends on: a mobile-friendly page, well-presented photos and the search visibility that brings visitors to it.

IBrand Media

If you want a gallery that fits your services and your market, see what we offer and request a custom plan. If you run a med spa, our guide to digital marketing for med spas is a good next read, and home service owners will find ideas in our piece on content for home service websites.

A simple launch checklist

Use this before you publish:

  1. Pick your pairs. Choose 10 to 15 jobs with clear, visible change and matching photo conditions.
  2. Check consent. Confirm signed permission for every identifiable person or property detail.
  3. Write captions. State the service, the timeline and any context a viewer needs.
  4. Choose the layout. A slider for a hero pair, a grid with filters for the rest.
  5. Test on a phone. Check load speed, tap targets and the single-photo toggle.
  6. Test with a keyboard. Tab to the slider, move it with arrow keys, confirm focus is visible.
  7. Add alt text. Describe what each image shows.
  8. Link it. Put it in your main menu and add a call to action beside the images.
  9. Review the claims. Make sure nothing in the page implies more than you can substantiate.
  10. Schedule updates. Add new pairs after finished jobs, and retire outdated ones.

FAQ

Start with 10 to 15 well-matched pairs rather than dozens of uneven ones. Add new work as you finish it, and organize pairs by service so visitors can find what matches their need. Quality and consistency matter more than the total count.

They do different jobs. A slider is a display style for one pair, best when the alignment is exact and the change is dramatic. A gallery is a collection of pairs. Most small business sites do well with a slider for a headline pair and a grid-based gallery for the rest.

Do I need permission to post customer photos?

Yes, get written consent from anyone identifiable, and specify where and for how long the photos will be used. Medical and cosmetic practices should be especially careful, since identifiable patient images can count as protected health information under HIPAA. Ask your attorney to review your consent form.

Can I edit the photos before posting them?

Basic cropping and resizing are fine. Altering lighting, color, posture or the result itself can mislead viewers, and the FTC looks at the overall impression an ad creates, including images. Show the work as it was and keep original files on record.

It can support it. Captions, alt text and descriptive page titles give search engines context, and a fast, mobile-friendly page improves the visitor experience. It works best alongside local SEO and a complete Google Business Profile, not as a substitute for them.

Sources