Taking pictures for your website might seem relatively straightforward. But there are a number of web-specific best practices that ensure your pictures are optimized for viewing online.

By Jon Gimpel

Posted:

Category: Digital Awesomeness Web Design


When getting new professional photos taken for your website, it’s easy to assume that taking pictures for the internet is no different than getting pictures taken for anything else. Or that your photographer will understand the difference.

Nevertheless, while there are plenty of general photography best practices to keep in mind for your photoshoot – many of them described below – there are some web-specific best practices that you should also understand before dropping money on a professional shoot.

After all, few scenarios are more of a nightmare for you – and/or your design team – than realizing that some fresh prints aren’t going to cut it.

We’re here to help you avoid that, and provide some general guidance if you’re taking a DIY approach.

How to get your website photography just so

To keep things simple, we’ve broken down our tips according to the following:

  • Subject: Who or what you’re photographing.
  • Setting: Where and how you’re taking the photos.
  • Technical Specifications: Technical details related to your photos.

Subject: Staying Focused

When choosing photos for your business’ or firm’s website, it’s ideal to use custom, professional photos as much as possible.

You can certainly get away with stock photos in some cases, but it’s not ideal for the most important shots of your site, in particular.

That means, of course, making sure you get quality photos of principle partners. Typically, their photos will be shown on the “Hero” image (top, primary banner of your homepage), and take up a good chunk – roughly 50% – of the space.

For businesses and firms in the services industry, especially, it’s paramount that your website includes photos that connect users to your business and the faces behind it.

Also, if you have an attractive office building – exterior, interior, or both – it’s good to get some shots of that to add to the site, too. À la:

Mix it up – include action shots

While you should certainly get simple, portrait shots of you and your partners for your homepage, there are plenty of other places to add interesting action shots – on the homepage and interior pages.

Providing your web designer with a handful of these types of photos will give them lots of great options when arranging the visual layout of your site.

And nothing connects users with your business quite like shots that show you doing what you do best.

Consider how your photos will display on your site

Although you might not know how each photo taken will end up appearing on your site – if at all – you can still take steps to make sure that you’re taking the right kinds of photos for how your site is likely to look.

For example, if you’re a solo attorney, or only have one or two partners, there’s a good chance your designer will want to offset your photo on the Hero image, adding a call-to-action button on the opposing side. Like so:

In that case, you can be a bit more intentional with your setting, opening up the possibility for nice offset shots to be included on the site.

On the other hand, if you have a number of principal partners you want to include in the photo, you’re likely going to have a centered photo, with a call-to-action button below the partners.

Dress for success – consider the background

When it comes to focusing on your subjects, it’s important that you consider the background.

The primary principle to keep in mind is contrast. You want to make sure that the subjects are standing out (i.e. “popping”) from the background.

Hence, if you plan on taking interior photos, consider the primary colors of your office

If the walls are white and you have a lot of windows and bright decor, wear darker clothing.

On the other hand, if you’re photographing against a darker background, lighter clothing is the way to go.

Which brings us to…

Setting: Creating Contrast

Making sure your subjects’ appearance works with the background is an important piece.

But it’s just as important to make some good decisions about the background itself.

The most important thing to keep in mind with your background is that it accentuates your subject(s) in a positive, professional manner.

No distracting dog walkers. No McDonald’s. No gaping onlookers.

Instead, stand in front of your office building, sit behind your desk, or go for a full interior photography set and place your pictures over any background after the fact. Good ol’ Photoshop.

Get the lighting right

If you’re taking exterior photos on a good weather day, you shouldn’t have to think too much about the lighting.

In that case, you pay more attention to your background, to ensure that you’re not capturing distractions and to make sure that you’re showing relevant imagery.

On the other hand, if you’re taking pictures inside, you’ll likely need a professional set up. Interior lighting can be a total pain without it.

When doing so, always use a black or white backdrop. If you use a colored backdrop, the colors can reflect of the subjects, creating a strange hue – even after professional Photoshop work.

If your office is well-lit, though, you might be able to get some good photos without a setup, such as this one:

Keep in mind that the background may be completely deleted with relative ease, but the background’s effect on the subjects is not so simple to deal with.

Technical Specifications: Tying up Loose Ends

There’s nothing worse than ending up with high quality photos that just won’t work – for one reason or another.

Usually, the problem arises when the composition or scope of the photographs are too limiting.

Here’s how you can avoid having to schedule another photoshoot.

Provide options

Options are a web designers best friend.

Especially if they’ve already begun their work prior to getting the photos, they may already have a general design that they believe would work best. The more options you provide, the better.

After all, regardless of whether or not work has begun on the design, you don’t want the effectiveness of your site to pivot on the usefulness of your photos.

Also, it’s important to remember that, while Photoshop makes it easy to remove unwanted elements in a photograph – whether that be something in the background or parts of the subjects’ bodies that aren’t shown  – it’s not possible to add things in.

If you miss an ear in the photo, there’s not much we can do about that…

Hence, going for the big, full body approach is generally best.

Take widescreen photos

Due to the emergence of high-quality, widescreen photography trends in web design, it’s of the utmost importance that your photos are widescreen.

If a photo doesn’t display correctly due to being too narrow, you or your design team might be forced to cut out important parts of the image.

And as we all know, forcing a narrow-resolution photo to work often results in compromises to the picture’s quality (i.e., pixelation), so you want to make sure you’re taking wide enough photos to begin with.

In fact, images we typically use for heros are much narrower than 16:9, more often around 2000px wide by 700px tall – nearly three times as wide as tall.

Looking for More Inspiration? 

Check out our Design Portfolio, along with our post, 10 Fundamental Components of Effective Law Firm Web Design.

Keeping up with current web design trends can seem overwhelming and tedious, but we’re here to help you through the process of getting a modern, effective website built for your firm.

Trust us, it’s worth it.

If you’d like to chat about a new website design for your firm, get in touch with us today. We’d love to hear from you.

Schedule your free consultation now with Gerrid Smith, CEO


Client Review

"I cannot be happier with Gerrid Smith and Black Fin, and highly recommend their services."
- Seth Gladstein, Gladstein Law Firm