You get professional photos taken — and they are gorgeous. I mean, seriously. The photographer captured the relationship between you and your dog beautifully. Your hair is perfect, your make up is good, you managed to smile in that way makes you actually look happy (instead of artificially pretending to be happy just for the camera)… And then you go to place the pictures on your website.

And off goes your head. Literally.

You fiddle around trying to get the photo to look right, and it seems you can’t manage to get both your face and your dog’s face in the photo! You wind up having to choose between two bad options: cut off half of your dog or cut out your head.

So, what went wrong?

7 Traits of Great Website Photos

Good photos on your website can make your site look like it was done by a pro (even if your cousin’s best friend’s boyfriend did on it on the cheap) and photos that aren’t taken with your website in mind can make even a professionally designed site look less polished.

The traits that make website photos “good” or “bad” are fairly specific — and most portrait photographers simply aren’t aware of what factors are important to make photos work for your website.

What kind of factors?

Website photos should be zoomed out

The first thing — and the problem that caused you to lose your head — is that often good portraits are zoomed in fairly close on the subject matter (you and your dog!).

But if you’re planning on using the photos for your website, you’re better off having the photographer zoom out.

Including an extra bit of background will help ensure you and your dog both fit in the frame when you put the photo up on your homepage. It allows you to take up a smaller amount of the space proportionally, so an image can still reach across your screen width-wise, without making you take up as much room on the screen height-wise.

Can you see how in the “photos” below, the photo on the right would be easier to crop without losing the subject matter (you)?

This will give you a LOT more flexibility when it comes to how you can use your photos and where on your site they will work. It also helps ensure our photos will look good on phones and tablets. While our website often crops the top and bottom off of photos when you’re looking at it from a computer, tablets and photos often crop the photo from the left and right.

Include extra negative space in the photos

Negative space, in art, is the space around and between the subject(s) of an image. If you’re planning on using your photos as background images for your website, you’ll likely want to put text and/or a button overtop of the image… without putting it across someone’s face.

Both of the images above, in the zoom out example, have a nice amount of negative space. So, again, we have room to crop the photo in either direction on your website, without losing anything important.

Another way to think of this is the classic photography “rule of thirds.” This is a great short video on that concept, if you’re not familiar with it:

For your website, you’re most likely going to want the image to direct your eye toward text or your button — so just make sure your photographer understands that you’ll be adding those items overtop of the photo and need the visitors eye to be guided naturally to the text. Often that means instead of thinking of the image in thirds, you’ll actually want your subject matter to mostly fit in one box of your grid — and usually a one of the middle boxes in the left or right column.

Opt out of busy backgrounds for website pics

Again, keeping in mind that we’ll likely want to lay text over some of the images, you want to make sure that text isn’t going to be competing with a busy background.

While you definitely what the subject matter in focus, a slightly blurry or out of focus background can help ensure it doesn’t compete with what you want people to read, without making it necessary to add a background behind your text and on top of your photo.

You’ll also want to avoid having a lot of black AND white right next to each other in those portions of the photo… because most of the time you will want your text to be one of those two colors, and you don’t want your letters getting lost in the background photo.

In the photos to the left (thanks Sara Brueske!) you can see how the blurry background in both photos helps keep our focus where it should be… but the composition of the photo on the top is better for overlaying text. It has more negative space, and the subject matter is off to one side of the image, making it more ideal for use on a website.

Here, both photos have already been slightly cropped from the top and the bottom, because these are actually screenshots of the images laid out on a page of a site I’m working on as an example.

So you can see they were also zoomed out enough to allow for that!

Dogs are short. We are tall. Take that into consideration.

(Well, we’re tall compared to THEM, anyway.)

My point is, if your face is way up at the top of the photo and your dog’s face is down by your knees, it’s going to be harder to crop the image while keeping both of you in the frame. That means you’ll want to consider that as your having photos taken — look for opportunities to bring your face lower to the ground, or your dog up, closer to your face.

Can you see how the photo on the left would be easier to crop without losing anyone’s face than the photo on the right? Crouching down isn’t the only way to accomplish this — bringing them up to your level by putting a dog up on a picnic table, or rocks, or other natural objects also works incredibly well.

Think about your website photo focus points (and get a mix!)

Looking directly into the camera can help you come across as friendly and approachable. That’s great!

But it also has a downside.

Our gaze is naturally drawn to eyes and faces. That means if all your photos are you looking directly into the camera, your website visitors will get sucked into your baby blues instead of looking where you want them to look… at your website copy, whose job it is to persuade them to buy things.

The two images here are from an eye tracking study. The closer to red, the longer people rested their gaze in that area.

In the image on the top, the baby’s face draws our attention.

Unfortunately, from a marketing standpoint, this is a problem because we actually want people to look at and read the copy… not admire the baby.

In the image on the bottom, our gaze still goes first to the baby… but then we follow the baby’s line of sight to the headline and read the opening copy. Our eyes naturally seek out what the baby is looking at.

The baby’s gaze serves as a “directional cue,” telling viewers what to look at next.

So while you’ll definitely want a few stellar pictures of you and your dog(s) looking at the camera, you’ll also want a number of images of you gazing to the left or right. Which brings us right to our next point…

Don’t look off the page

If we know that a visitors gaze is going to move from faces to whatever those faces are looking at, then it makes sense to make sure we aren’t directing our visitors right off the screen.

Or, in other words, right off your website.

You want to keep those visitors captivated! Going from your pretty pictures, to your persuasive messaging to your buy button.

Choose your outfit wisely, so your photos match your website

If you’re getting brand new photos taken specifically for your site, then it makes sense to think about what you’ll wear. If you have a color that’s particular prevalent in your branding, I recommend finding a shirt or outfit that incorporates that color. Having your brand colors incorporated into your photos will make your entire site feel more thought-out and professional. It pulls it all together.

Take a look at this mock up of a client site I’m working on — purple is one of her main brand colors, and just helps pull the whole design together.

You can also color coordinate your dogs collar, your lead, and any other elements that will feature prominently in the photographs.

Other helpful website photo hints your photographer (and you) need to know

• When it comes to website photos, size matters. If you’re getting photos from a professional, it’s likely they’ll be more than large enough — but generally you want to aim for photos that are at least 1920px wide. That’s the size I recommend for images you plan to use as background photos, to help make them look good on larger screens, without going so large that they have a negative impact on site speed.
• You need a commercial license. When you get photos taken for your website, if you plan to sell things on that website, then you’ll want to make sure your photographer knows that is what you’ll be using the photos for… and make sure you have the rights to do so. Even when you buy a photo, it doesn’t mean you’ve purchased the copyright to that photo. The photographer typically still owns that – they’re selling you the right to use the images. If you use them in a way that you didn’t pay for, the photographer has the right to issue you a cease and desist order, and get the law involved.
• You can’t guarantee their watermark won’t be removed. A lot of photographers agree to commercial use IF you don’t remove their watermark. As you saw earlier, when we put photos into your website design the site will crop the photos in different ways on different devices. So you can’t guarantee that the watermark won’t get cropped out in some instances. Instead, ask if they’d be okay with you giving them a photo credit somewhere on your website (often, if clients ask for this, I do it for them in their footer). That way, they get credit… and you get photos.

It can also be really helpful if you find a few dog trainer’s sites with photos you particularly like and share those with your photographer before the shoot. It can give them a sense of what you’re looking for. One of my personal favorites is Summit Dog Training — many of the photos on her site match the criteria above (note: I can’t take credit for her site: I don’t know her and had nothing to do with it!).

Other things to think about when designing your website

Of course photos aren’t the only thing it’s important to think about when working on your website.

Doing a completely brand overhaul? You’ll also want to consider what matters when getting a new logo designed.

Just redoing your website? You’ll want to consider where you’re hosting your site and collect new testimonials.

…Either way, now you’ll know what to do to make sure your website doesn’t decide to take off your head.