Before & After Galleries That Don’t Kill Your SEO or Patient Experience

Why before & after galleries need a rethink

Before and after photos are powerful proof for treatments, but traditional image-heavy galleries and sliders can slow your site, harm accessibility, and risk non‑compliance with UK healthcare and advertising rules. At the same time, patients expect visual evidence and clear answers to “Would this work for someone like me?”

For UK GP practices and healthcare providers, the goal is to create lightweight, accessible, and compliant galleries that support SEO and genuinely help patients decide what to do next.

This guide covers how to do that with:

• Clean image hygiene (size and format)
• Clear patient consent practices
• Captions that genuinely convert
• Smart links to treatment pages
• Performance checks that keep SEO and user experience healthy

---

Rethinking proof: from sliders to smart story layouts

Why heavy sliders are bad for patients and SEO

Traditional sliders and carousels:

• Load multiple large images at once, slowing page speed
• Often rely on JavaScript that can break or feel clunky on mobile
• Are difficult to use with screen readers and keyboard navigation
• Hide information behind interactions that many users never engage with

Slow and inaccessible pages work against core healthcare SEO principles, which emphasise fast loading, mobile performance, and accessibility as ranking and user experience factors.

A better model: simple, scannable proof blocks

A more effective pattern for before & after content is to use simple image blocks with strong context, instead of carousels:

• A single, combined before/after image or two static images side by side
• A concise but informative caption
• A short “Am I a candidate?” explanation
• A clear link to the relevant treatment page and booking options

This keeps your pages light, easy to scan, and easier to maintain, while still giving patients the visual evidence they want.

---

Image hygiene: size, format and accessibility

Get images under control before you upload

Large, unoptimised images are one of the biggest causes of slow healthcare websites. Technical SEO guidance for healthcare consistently highlights compressed images as a key speed win. Image basics for healthcare galleries

• Aim for a maximum width of 1200px for full-width page images and 600–800px for smaller inline examples.
• Keep individual file sizes ideally under 150 KB, and almost always under 300 KB.
• Use a consistent aspect ratio (for example, 4:3 or square) so your grid looks clean and professional.
• Use identical angles, backgrounds and lighting for before and after shots to avoid misleading impressions.

Choose the right formats

Modern image formats significantly reduce file size without visible quality loss.

Recommended formats

• WebP
• Typically the best balance of quality and size
• Supported by all modern browsers JPEG
• Acceptable for photos where WebP is not feasible
• Use “high” but not “maximum” quality settings (typically 60–80%)

Avoid using PNG for photographic content unless you specifically need transparency, as it is usually much larger.

Basic accessibility for images

Patients using assistive technologies must be able to understand your galleries without seeing the pictures. WCAG-aligned practices include: Alt text best practice

• Use descriptive but non‑identifying alt text:

  • Good: “Before and after images showing reduction in facial acne scarring in a female patient in her 30s.”
  • Poor: “Before and after” or “Photo1.”
  • Non‑compliant: Any alt text that could identify the patient (name, unique features, specific location).
  • If the entire “proof block” is described in adjacent text, you can use shorter alt text and rely on the caption for detail. Layout and responsiveness

• Ensure images resize gracefully on mobile, without forcing horizontal scrolling.

• Maintain adequate contrast around any text overlaid on images, or avoid text-on-image entirely and keep text in HTML, which is better for both accessibility and SEO.

---

Patient consent reminders: keeping proof ethical and compliant

Start with clinical governance and privacy

All patient imagery is personal data. In many cases, it is also special category data under UK GDPR. You must:

• Obtain explicit, informed consent for photography
• Obtain separate, explicit consent for using images in marketing (website, social media, print)
• Store consent records securely and in line with your data protection policies
• Be clear that care is not conditional on agreeing to marketing use

Where relevant, ensure your approach aligns with:

• UK GDPR and the Data Protection Act 2018
• GMC, NMC or other professional guidance on images and testimonials
• NHS policies and local trust/ICB guidance for NHS organisations

Build consent reminders into the gallery itself

Visible consent reminders help reassure patients and demonstrate good governance. You do not need to show a full legal statement, but you should be clear that images are used ethically and lawfully.

Simple, reassuring consent note examples

• “Images shared with the patient’s informed consent. Individual results vary.”
• “Photographs used with consent and in line with our privacy policy.”
• “All patient images are published with explicit permission. We never share photos without consent.”

Place this text:

• At the top or bottom of the gallery page, and
• Where relevant, close to individual cases, especially if you are using more detailed case descriptions

Practical consent process tips

Robust consent process

• Use a specific, written consent form for photography and marketing use
• Explain:
  • Where images may appear (website, social media, printed materials)
  • That images may be visible for a long period
  • How and when a patient can withdraw consent
  • Avoid including names, initials, exact dates, or identifiable backgrounds in images or captions
  • Build in regular review points (e.g., annually) to confirm whether images remain appropriate to use

---

Captions that convert: from “nice photo” to “this is me”

What patients really want from before & after content

Patients are not only asking “Does this work?” They are asking:

• “Is this safe?”
• “Is this suitable for someone like me?”
• “What does recovery look like?”
• “How do I get from here to there?”

Strong captions can answer these questions briefly and encourage the right next step, all while staying within UK clinical and advertising rules.

Structure of a high-performing caption

Key elements of a good caption

• Patient type (non‑identifying)
• “Adult in their 40s with long‑standing knee pain”
• “Teenager with moderate acne not responding to over‑the‑counter treatments” Starting point
• “Struggling with recurrent tonsillitis affecting school attendance”
• Intervention (described factually)
• “Managed via a structured weight‑management programme and GP‑led follow‑up”
• “Treated under our minor surgery service following GP assessment” Timeframe
• “After 6 months of treatment and lifestyle support”
• Realistic expectation disclaimer
• “Results vary and depend on individual circumstances. A GP will discuss suitable options for you.”

This kind of caption gives context, manages expectations, and avoids over‑promising, which is consistent with UK healthcare advertising standards and professional codes.

Answer “Am I a candidate?” directly in the caption

You can build a short candidate signal into each caption to guide patients and reduce inappropriate enquiries.

Example “Am I a candidate?” phrasing

• “This approach may be suitable if you have similar symptoms and your GP rules out red‑flag conditions.”
• “Typically appropriate for adults with BMI over X where lifestyle changes alone have not been effective. A full assessment is required.”
• “This type of procedure is not suitable for everyone. Your clinician will discuss risks, alternatives, and non‑surgical options first.”

Keep this language factual and cautious. Avoid phrases like “perfect candidate,” “guaranteed results,” or anything that could be interpreted as a promise or inducement.

Case study examples

Dermatology‑linked GP extended access service

• Before: One large slider with multiple acne cases, minimal text.
• After: A simple grid where each case has:
• A single combined before/after image
• Caption: “Young adult with moderate facial acne. Referred via GP for specialist-led topical and oral treatment. After 5 months, inflammation and scarring are significantly reduced. Results vary.”
• Candidate note: “If over‑the‑counter treatments have not worked, speak to your GP about available options.”
• Outcome: Faster load times, more self‑referrals via “speak to your GP” messaging, fewer unrealistic expectations.

Minor surgery / dermatology clinic

• Caption: “Adult in their 60s with benign skin lesion on the forearm. Assessed and removed under local anaesthetic. Images taken 2 weeks apart. Not all lesions are suitable for removal; your GP or clinician will assess and discuss options.”
• “Am I a candidate?”: “You may be assessed for this service if your lesion is symptomatic, changing, or affecting function. Benign lesions that are purely cosmetic may not be offered on the NHS.”

---

Linking to treatment pages: turn proof into clear next steps

Why internal linking matters for SEO and patient journeys

Good healthcare SEO depends on:

• Dedicated, well‑structured treatment/service pages
• Clear internal links that help search engines understand relationships between content
• Straightforward user journeys from information to action

Before & after galleries should support, not replace, your treatment pages.

How to link effectively from galleries

Smart internal link patterns

• From each case, link to the primary treatment page
• “Learn more about our minor surgery service”
• “Find out how we support patients with acne”
• Use descriptive anchor text, not “click here”
• Add a prominent call to action near the gallery:
  • “Check if this service is available at your practice”
  • “Book a routine appointment with your GP to discuss your symptoms”
  • For private providers: “Book a consultation” or “Self‑referral form”

Where possible, ensure each treatment or service has its own page, as this is a well‑recognised healthcare SEO best practice. Avoid SEO and governance pitfalls

• Do not create multiple pages with very similar galleries for the same service; this can cause keyword cannibalisation.
• Avoid linking case studies to services that are no longer offered or not available at that specific site; keep availability information clear.
• For NHS GP practices, make sure it is obvious whether a service is NHS‑funded, part of an extended access/PCN service, or private via an aligned provider.

---

Performance checks: keep your galleries healthy

Measure page speed and core web vitals

Visual content is often the heaviest part of a page. You should regularly test:

• Page load time on mobile
• Core Web Vitals (Largest Contentful Paint, Cumulative Layout Shift, Interaction to Next Paint)
• Overall page size and number of images

Use standard tools such as:

• Lighthouse / PageSpeed style audits
• Browser dev tools “Network” tab to spot very large images
• Basic web analytics to measure bounce rate and time on page

Where performance is poor:

• Compress or resize images further
• Reduce the number of cases per page (e.g., paginate or group by treatment)
• Remove unnecessary JavaScript such as fancy sliders and animation libraries

Check accessibility and usability

Before & after galleries must fit comfortably within a WCAG‑aligned site.

Quick accessibility checks

• Can all gallery elements be reached and activated using keyboard only?
• Does screen‑reader software read out meaningful labels and alt text?
• Is text associated with images presented as HTML text, not baked into the image?
• Is zooming up to 200% still usable on mobile?

Add patient testing where possible—ask a few patients or PPG members to navigate the gallery and note where they get confused or stuck.

Monitor engagement and conversions

To understand whether your galleries help patients:

• Track click‑throughs from gallery pages to treatment/service pages
• Monitor contact form submissions or appointment bookings originating from those pages
• Watch for high bounce rates where patients may be overwhelmed or confused by image-heavy layouts

Refine layout, captions and calls to action based on actual behaviour, not assumptions.

---

Example layout: a compliant, SEO‑friendly gallery block

Here is a simple pattern you can brief to designers or implement in your CMS: Case block layout

• Image area:
  • Single before/after image in WebP, max 800px wide
  • Alt text: “Before and after images showing improvement in [condition] in [non‑identifying patient description].”
  • Text area beneath:
    • Short title: “Acne improvement after structured treatment”

Caption:

• Patient type and starting point
  • Treatment approach and timeframe
  • Realistic expectation statement “Am I a candidate?” line:
• One sentence explaining in general when this approach is considered

Link:

• “Learn about acne treatment options at our clinic”
• Global notes below the gallery grid:
  • “Images shared with patient consent. Results vary between individuals.”
  • “Some treatments may not be available on the NHS in all areas; your GP or clinician will advise.”

This kind of block-based layout works well with responsive design, supports fast loading, and can be understood by assistive technologies.

---

Key takeaways

• Heavy sliders and image carousels often harm SEO, slow pages, and reduce accessibility. Simple, static layouts usually work better.
• Image hygiene—right size, compressed format, and consistent framing—dramatically improves speed and professionalism.
• Explicit, well‑recorded patient consent is non‑negotiable. Reinforce this with short consent reminders on the page.
• Captions that describe patient type, pathway, timeframe and realistic expectations not only convert better but also align with ethical and regulatory standards.
• Clear links from galleries to treatment pages strengthen both SEO and patient journeys, turning proof into practical next steps.
• Regular performance, accessibility, and engagement checks ensure your galleries continue to support both patients and search performance over time.

---

Next steps for your practice

Audit your current galleries

• Identify sliders, large images, and inaccessible layouts.
• Note any images where consent documentation is unclear or missing and remove those first.

Implement quick wins

• Compress and resize existing gallery images.

• Replace sliders with simple image grids or single before/after blocks.

• Add consent reminders and realistic result disclaimers. Strengthen structure and content

• Ensure each key service has a dedicated treatment page.

• Update gallery captions to include patient type, timeframe, and a brief “Am I a candidate?” message.

• Add clear internal links and calls to action that match your NHS or private pathways.

Plan for continuous improvement

• Schedule regular performance and accessibility checks.
• Train content and admin staff on your image and consent standards.
• Involve your Patient Participation Group or patient feedback channels to test usability and clarity.

Handled well, before & after galleries can become an asset that supports SEO, respects patient dignity, and genuinely helps people understand whether a treatment might be right for them.