Advice and Best Practices for Taking Website Photos

website photography

“So, uh, what kind of pictures should I be trying to get exactly…?”

This is the question we get from every photographer we use for a website photoshoot.  And for good reason.

Photographing for a website design is a strange thing.  Ask most any photographer who has tried it.

As heavily used as photos are in modern web design, not just any photo will do.  Even if it’s a good photo. Even if it’s a great photo.

You can have a photo that’s amazing and beautiful and wonderful in every way, and that photo can be absolutely useless for a website.  So what makes a good website photo?  It can be a little different for each website, but here’s some general tips that we’ve found to be the most helpful.

For illustration purposes, we’ll be using photos taken by Wil Galvez Photography for our own website.

Horizontal is King

RD-41

Thanks to the horizontal nature of computer screens, wide, landscape-style images work best for web design.  Hands down.  We’d go as far to say 90% or more of the photos used in our designs (outside of team/staff pics) are wide shots.

Portrait oriented pics, on the other-hand, are often useless in the web world.  Now, if you’re getting into the world of mobile apps, or even a website that will experiencing mostly mobile traffic, this can change.

But we’ll get to that in a second.

Slightly Obscure(d)

RD-31

Chances are, the photos on a website are going to have things overtop of them.  Whether it’s title text, paragraphs, call to action buttons, or contact forms, the picture is rarely the main focus.  Because of this, the picture shouldn’t be too focused in on something that will take all of the attention.

In the picture above, we have the hand, the computer, and that classy watch (it may or may not be mine).  The pic still says a lot.  It puts off a tech vibe with a touch of class.  But there’s nothing there to keep your attention for too long.  You wouldn’t put this as your Facebook over photo or anything, but put a few words over top of it, and bam:

RD-31

 

Not all photos need to be this way, but some definitely do.  On a similar note…

Focus on the Negative Space

RD-32

Website photos are a great chance to test out your skills with negative space.  Or what would normally be considered negative space.  In some cases, the photo won’t have a true focus, and so to a degree, the negative space becomes that focus.

Are we confusing you yet?

Just try to keep a certain degree of breath-ability in your pictures.  Keep the margins wide.  We can always crop a photo to narrow the focus, but we can’t add in more negative space.

Like the space around this clock, for example:

RD-33

Truth be told, we wouldn’t mind there being a little more space on the sides, but the chair seen here is only so big.

Eventually Identifiable

While a level of obscurity can work nicely with website photos, they should ultimately be identifiable.  You don’t want a visitor sitting there, trying to figure out what something is.  And since you’re taking photos of a specific place/business, you want the viewer to be able to place it.

For example, this picture might just appear to be a bunch of stacked circles at first:

RD-61

But most will quickly realize it’s a ceiling diffusor (i.e. air vent), and you discover you’re looking at a warehouse style ceiling, which adds a certain aesthetic to our business.

Faces are Overrated, ESPECIALLY in Groups

Generally speaking, we don’t want to see many faces in website photos.  These are not senior pics or family portraits.  A face here or there is fine, but don’t get too caught up in it.  And when there’s groups of people involved, be particularly aware of faces.  It becomes exponentially more likely that someone in the group will make a strange face and ruin the whole shot.

Even if they don’t, it all gets a bit distracting.  So unless it’s specifically a group photo, we prefer the solo shots.  Like our very own Chrissie here, pretending to be doing important work:

RD-28

She’s actually just drawing pictures of ponies.  She really likes ponies.

Keep Screen Sizes in Mind

Website layout is a bit tricky these days thanks to responsive design.  Responsive design means that the website adjusts to the size of the screen it’s on.  These causes pictures, content, and everything in between to shift.   A wide shot can suddenly become a lot narrower.  It can even turn vertical altogether.

Using the clock again, let’s crop that into something closer to a phone screen:

RD-33 (2)

The clock is maybe a little focused now, but we could make it work.

As best as you can, you should try to capture some shots that look good both full-sized and cropped.  They should even look alright if they’re cropped to portrait.  At least some of them.

Still Not Sure?

One of the best things you can do is to look to others for inspiration.  Check out websites that you view regularly and see what they’re doing for photos.  Look up the designed websites of the past year.  See what other photographers are doing.

But you should follow your instincts too.  After all, you’re the photographer.  So go out and photograph.

Any tips you’d like to add?  Or maybe you have a question?  Just let us know in the comment section.

Written by Timothy Snyder
on May 5, 2016