Boost Your Medical Website Design With Before & After Photos

Websites for doctors’ offices and other medical groups are helpful resources for patients. After researching a qualified physician or other type of medial practice, patients want to use the practice’s website for information and reassurance before making the commitment that comes with a medical or surgical procedure.

Depending on the type of procedures your practice offers, before-and-after photos could be a hugely helpful addition to your overall medical website design. Quality photos can give patients a sense of what to expect when changing their appearance (in the case of reconstructive surgery or cosmetic dentistry), recovery time and progress, or post-surgery scarring.

Here’s what to do (and what to avoid) when adding photos to your office’s medical website.

Use only high quality photos. The quality of your work may be judged based on the quality of the images on your website so pay attention to lighting, composition and focus when shooting photos for your website. While some photos might be perfect for your professional analysis before performing a procedure, these might not be the best set-ups for your website.

Depending on the sensitivity of the procedure, consider scheduling a professional photographer to take before and after photos on a regular basis. While working with the photographer, ask for their professional advice to later shoot images yourself, in your office.

Always use a quality camera (there are many affordable DSLR cameras on the market that take great photos on automatic settings) and always use a flash. Resist the temptation to snap a quick picture with your camera-phone, as even the best quality images could look amateurish and devalue the perception of your work or expertise.

Use editing software to point out pertinent details. With lots of free or low-cost photo editing software options, it’s relatively easy to quickly learn the basics to add text or circles and call-outs to an image to pump up your medical website design. Use these tools to draw the reader’s attention to the changes in the before-and-after photo. Depending on the type of procedure, some readers might not be able to spot a huge difference in the images, so circling certain areas to highlight and adding short comments or the names of procedures will help patients understand what they’re looking at.

Watermark your photos with your business name and website address. Using your photo editing software, be sure to add your company name and web address to the corner of the images. This will ensure that your images are not taken from the web and posted on another medical website, and will also help readers remember where the images came from if downloaded onto a desktop or emailed to a friend.

Streamline your medical website design by putting the “before” and “after” photos side-by-side in one single image. This will create more impact as it will help the reader clearly spot the differences between the two images.

Apply SEO keywords before uploading. Pick a file name that contains keywords you want your website to rank for. (Keywords should obviously always relate to the image content.) Use the “Alt text” tag to describe exactly what the image contains. Save your images with a small file size (without losing quality) before posting to your website (hint: in Photoshop, use the “Save for Web & Devices” function, not just the general “Save As” function when saving images.)

Before-and-after photos have the potential to create a lasting impact with patients and can make your medical website design look current and be more useful. However, haphazard use of photography can inadvertently drag down the perception of your site, so be sure to follow the tips above. If you’re not sure where to start or would like further advice, work with a web design professional to evaluate your medical website needs and develop a custom solution that will work well for your practice.


Want to show your colleagues how smart you are? Get actionable ideas written specifically for B2B marketers – subscribe to the BeBop newsletter today!

Related Posts
B2B Website Design | Web Development

Scrolling Animation Options for B2B Web Design: An Overview

B2B Branding | B2B Website Design

B2B Branding Trends for Technology Firms 

B2B Website Design | Web Development

Boost Your B2B Website’s UX: Five Spots to Focus On