This is for a local service business owner rebuilding a homepage or service page and deciding how much visual proof is enough. The short answer: use 2 to 4 before-and-after pairs on a homepage, 3 to 5 on a service page, and move the rest to a portfolio or case-study page. The decision is not show everything; it is show enough proof for a buyer to choose the next step without slowing the page or making the section hard to scan.
Before-and-after examples are persuasive because they make change visible. They are also easy to overuse. For image-heavy pages, Core Web Vitals give a useful guardrail: a good Largest Contentful Paint is 2.5 seconds or less, a good Interaction to Next Paint is 200 milliseconds or less, and a good Cumulative Layout Shift score is 0.1 or less, measured at the 75th percentile across mobile and desktop visits. That does not mean every proof section needs a performance lecture. It means the first proof image should earn the weight it adds.
Choose examples that support the decision
Start with the page’s sales job. A kitchen remodeling page should show kitchens with the same buyer concern: old layout, poor storage, dated cabinets, bad lighting, or water damage. If the business is not remodeling, translate the same rule instead of expanding the page. A colorist can group balayage, gray blending, and corrective color. A fitness coach can group posture, strength, or mobility progress. A designer can show the starting artifact, the process artifact, and the measurable result.
- Use 2 to 4 proof pairs on a homepage. Use 3 to 5 proof pairs on a service page when the visitor is still deciding. Move the rest to a portfolio, gallery, or case-study page.
- Caption each pair with one problem, one change, and one result: Before: dark 1990s oak kitchen with one prep zone. After: white shaker cabinets, quartz counters, and a second prep zone near the range.
- Use real, consented project photos for local services. If the same photos also go to Google Business Profile, the useful baseline is JPG or PNG, 10 KB to 5 MB, recommended 720 px by 720 px, and minimum 250 px by 250 px.
- Name image files and alt text for the job shown. Search guidance says nearby text, captions, titles, filenames, and alt text can all help explain an image.
- Put the proof next to the claim it supports. If the page says bathroom remodels finished with cleaner storage, the next proof pair should be a bathroom, not a whole-house gallery.
In small-business site builds and audits, the most common proof problem is not a lack of photos. It is unranked photos. Ten average pairs blur together, while four well-captioned pairs give the sales conversation a shape. If the owner cannot explain why a photo belongs on that page in one sentence, it usually belongs deeper in the site.
Here is a simple checklist for a contractor replacing an outdated website. It keeps the proof section specific and keeps the first page from becoming a photo dump.
- Inventory: Start with 12 before-and-after pairs from finished jobs.
- Filter: Delete any pair that does not match the service page. A kitchen page keeps kitchens only.
- Rank: Score each remaining pair for relevance, photo clarity, and buyer objection.
- Select: Keep the top 4 pairs for the page. Send the next strongest examples to a portfolio or case-study page.
- Caption: Write 20 to 35 words per pair using Before, After, and one concrete detail such as material, room, time period, or problem solved.
- Build and test: Use the same crop ratio, caption style, and button text. After publishing, run a speed test and reduce image weight if the first large proof image slows the page.
If you do not have the site shell yet, the Website Builder home page is the right place to start because it frames the first step around describing the business before the site is built. Bring the selected proof pairs and captions into that process instead of trying to organize 40 images after the layout exists.
Use layout to reduce visual noise
Before-and-after sliders, paired images, tabs, lightboxes, and case-study cards can all work. The mistake is mixing too many patterns on one page. Use one comparison pattern for the main proof section, one gallery or case-study pattern for extra examples, and one button style for the next action.
The platform matters less than the pattern. In WordPress, Wix, Squarespace, or the builder already attached to the business, choose one reusable comparison layout and repeat it. Do not use a slider for one pair, a gallery for the next, and a lightbox for the third unless there is a clear reason. Most visitors are comparing the work, not grading the interface.
Use sliders sparingly. A slider is strongest when one pair carries the whole story: garage to studio, old patio to outdoor dining area, or first draft to final brand identity. If the visitor must drag through 8 sliders to understand the offer, paired images or cards are usually clearer.
Use the same image shape across the section. A 1:1 square grid works well for Google Business Profile reuse. A 4:3 pair works well for rooms, landscaping, restaurant interiors, and fitness progress photos. A tall mobile screenshot pair works well for app, landing page, or ad creative examples. Mixing all three on one service page makes the proof harder to compare.
Also separate visible captions from alt text. The visible caption should help the buyer decide: After: 42-inch vanity, brighter mirror lighting, and closed storage. The alt text should describe the image for search engines and screen readers, without vague names like image1.jpg and without keyword stuffing.
Connect proof to action
Proof should lead to a concrete action while the visitor still remembers the example. A remodeler should put Request a kitchen estimate after the kitchen pair. A restaurant should put Ask about private events after a dining-room setup. A designer should put View the full identity case study after one strong brand before-and-after, not after a long mixed gallery.
- Use one primary call to action per proof section: estimate, consultation, booking, menu inquiry, portfolio review, or product purchase.
- Put the button directly after the proof group it belongs to. Do not make the visitor scroll past unrelated services before acting.
- If the site uses a form, test the form on mobile before launch and send one real test inquiry to the business email address.
- Use the homepage proof to route people to the right service page. Use the service page proof to route people to the full portfolio or case study.
- For local businesses, reuse only the strongest, most representative photos in local discovery. The website proof section and the Business Profile do not need the same volume; they need the same message.
The practical rule is this: put 2 to 4 highly relevant examples on the homepage, 3 to 5 on the decision page, make each caption explain the change, move the rest to a portfolio or case study, and test the published page before sending paid or local traffic to it.
FAQ
How many before-and-after examples should go on a homepage?
Use 2 to 4 on a homepage. A homepage has to introduce the business, show proof, and route people to the right service. If you have more than 4 strong pairs, move the extra examples to a portfolio, gallery, or service-specific page.
How many before-and-after examples should go on a service page?
Use 3 to 5 on a service page. That is usually enough to answer the buyer’s main objection without turning the page into a gallery. Pick examples that match the service, price range, and problem the page is selling.
Where should the extra examples go?
Put extra proof on a portfolio, gallery, or case-study page. The service page should make the decision easier; the deeper page can satisfy people who want more evidence before they call, book, or request an estimate.
Should I use a before-and-after slider?
Use one slider when the comparison is dramatic and easy to understand without reading. Use paired images or cards when the visitor needs to compare several services, rooms, designs, products, or project types quickly.
Do captions help SEO?
Captions help users first. They can also give search engines more context because image understanding can use nearby page content, captions, titles, filenames, and alt text. Write captions for humans, then write accurate alt text for each meaningful image.
What should I check before publishing?
Check the page on a phone, test the form or booking link, confirm that the proof images are sharp but not oversized, and run a speed test. If the first proof image makes the page feel slow, reduce image weight or move extra gallery items lower on the page.
Sources
- web.dev, Core Web Vitals thresholds – https://web.dev/articles/vitals
- Google Business Profile Help, photo and video guidelines – https://support.google.com/business/answer/6103862?hl=en