Before-and-After Photos That Rank: A Guide for Trades and Salons

The best sales pitch your business owns is probably sitting in your camera roll right now. A rotted deck turned into a clean cedar platform, a crumpled quarter panel made straight again, brassy hair transformed into a soft balayage: those photos close more jobs than any slogan ever will.

The problem is where they end up. Most contractors, body shops and stylists post them to Instagram, collect a few likes, and watch them sink under newer posts within a week. Google can't do much with them there, and the customer searching for "deck builder near me" or "balayage Beaverton" never sees them. This guide shows you how to put those same photos on your website so they work for you for years.

Why your website beats Instagram for before-and-after photos

Social media is great for staying top of mind with people who already follow you. But when a stranger searches Google for a service in your town, Google looks at websites, Business Profiles and the content it can understand on them. A photo on your own service page, with the right labels, tells Google exactly what you do and where you do it.

That matters more now that Google's AI Mode and AI Overviews summarize local options for searchers. Those systems lean on clear, descriptive content. A page that says "kitchen remodel in Tigard" in its text, its image names and its captions is easy for them to understand. A page with a gallery called IMG_4471.jpg is not.

A quick example

Picture a small general contractor in Beaverton who just finished a bathroom remodel. He has a great before photo of a cracked 1990s tub surround and a great after photo of a walk-in tile shower. Today he posts both to Instagram and moves on.

Instead, he spends ten minutes doing the steps below and adds the photos to his "Bathroom Remodeling" page. Now that page shows real proof, describes the job in plain words, and mentions the city. Google has more to work with, and a homeowner comparing three contractors sees actual finished work instead of stock photos. Same photos, very different payoff.

Step 1: Name your files like a human would search

Before you upload anything, rename the file. Google's own image SEO guidance recommends short, descriptive file names. Use lowercase words separated by hyphens, and include the service and the location when it fits.

• Bad: IMG_4471.jpg
• Good: bathroom-remodel-walk-in-shower-after-beaverton.jpg
• Good: honda-civic-rear-bumper-repair-before-hillsboro.jpg
• Good: blonde-balayage-before-portland-salon.jpg

Keep it honest and readable. Don't stuff ten keywords into one name; it looks spammy and doesn't help.

Step 2: Write alt text that describes what's in the picture

Alt text is a short description attached to an image. Screen readers read it aloud for visitors who can't see the photo, and search engines use it to understand the image. Write it the way you'd describe the photo to someone over the phone.

• Contractor: "After photo of a remodeled bathroom with a gray tile walk-in shower and glass door"
• Body shop: "Before photo of a silver sedan with a dented rear bumper and scraped paint"
• Salon: "After photo of long hair with a soft honey balayage, styled in loose waves"

One sentence is plenty. Skip "image of" at the start and don't repeat the same alt text on every photo.

Step 3: Add a caption with the job and the location

Captions are the visible text right under a photo, and people actually read them. They're also where you can add the context Google and customers both care about: what you did, where, and sometimes how long it took.

For example: "Before and after: full bathroom remodel in a 1990s Beaverton home. Old fiberglass tub replaced with a tiled walk-in shower in about three weeks."

For a salon: "Brassy box-dye color corrected to a cool blonde balayage at our SW Portland studio. Two sessions." Only include details you're sure about, and get the client's permission before posting any photo where they can be recognized.

Step 4: Put the photos on the matching service page

This is the step most people skip. A single "Gallery" page full of unlabeled pictures is better than nothing, but photos work hardest when they sit next to the text about that exact service.

1. Put bathroom photos on your bathroom remodeling page, deck photos on your deck page, and so on.
2. Place each before-and-after pair side by side or one above the other so visitors instantly get the story.
3. Add two or three pairs per page instead of forty. Choose your strongest, clearest work.
4. Link from your gallery page to each service page, and back again.

Step 5: Keep the files light and the photos sharp

Big photo files slow your site down, especially on phones, and slow pages lose visitors. Resize photos to the width your site actually displays (often 1200 to 1600 pixels wide is plenty) and save them in a modern format like WebP or a compressed JPG. Shoot before and after from the same angle and in similar light so the difference is obvious.

A simple routine you can stick to

You don't need to overhaul your site this weekend. Try this: every time you finish a job worth showing off, take the before and after from the same spot, rename the files on your phone, and send them to whoever updates your website with a one-line caption. Once a month, add the best pair to the right service page. In a few months, your site will be full of real, labeled proof that nobody else in your area can copy.

Want help getting your photos to work harder?

If your best work is buried on Instagram and your website is still showing stock photos, we can fix that. Gotta Web Design in Beaverton, Oregon builds AI-powered websites for contractors, auto shops and salons, with service pages and galleries set up the right way from day one. See what your site could look like at gottawebdesign.net or call us at (503) 381-2251.