You’ve probably dealt with blurry photos before. You go to a site like Snapfish to order your holiday photos. After you upload them, an annoying little often pops up warning you that the resolution is too low.
Low resolution just means that the image isn’t in sharp enough detail to print because of the low file size of the image. If you go ahead and print them, the pictures will come out unsatisfyingly blurry.
no one likes blurry pictures
This is me sending you a little as it applies to your website photography. Say you get photographs taken for your website. You have the photographer take whatever pictures they think is best (which is a good thing since hopefully your photographers knows their craft).
But unless you make a point to communicate about it, the photographer may not be considering the intended use for the photos. After you get the final proofs, you’ll go to crop the beautiful new photos for your website (or your developer will), and the pictures end up blurry. No bueno.
Now, whether or not you get this result will depend on the way you’re displaying your photo on your website. If it’s just a little thumbnail in the sidebar, like I have on the left here on my site, then you probably won’t have any issues.
But if you’re going for a big “hero” image (basically just a big full-screen, full-width image at the top of a page) like I have on my homepage, then this is where you’re really going to want to pay attention to this next bit.
make sure you have enough pixel density
There are only a certain number of pixels on a digital image. Pixels are just little teeny tiny dots that your picture is made up of. If the image file size is small, that means less pixels. So when you zoom in a bit on the image or you crop your image to fit into a hero section, then the quality of the image goes down.
To make sure you have enough pixel density to make up for all the cropping, what you need to do is this:
get photography with plenty of white space
Tell your photographer that some of your photos are going to be used as big banner images for your website.
Tell them that for every picture that they take of you, they need to take one that’s pulled back and shot loosely, with plenty of empty space around you.
That way when you go to build your website, you or your developer can crop that image to the size you need it and it’ll still look really crisp and clear.
This is important, my friends. A blurry header image is not professional, and it’s pretty distracting to the eyes, too. Taking away from the great website design you’ve worked so hard on!
To give you an example, on Lara Johnson’s website, her header image has a lot of white space around her. The photographer was sure to leave extra space on one side, too, which gave us room to include her headline that introduces herself. A great strategy!
make the background easy on the eyes
Now you might be thinking, “Okay, got it, I’ll have my photographer take a few pulled-back pictures.”
But then you go to put it on your website and realize the background is really distracting because it’s super busy. There are too many details or colors, even if the photographer has blurred it with editing.
Be sure that the background isn’t distracting. A brick wall is a good example. Just so it doesn’t draw the eye – we want YOU to be the main focus!
A great example of this easy background is on Candice Toone’s website. The background in her photos is white and bright, which gives a nice clean look to her about page, where this header lives.
You’ll notice on Candice’s about page, too, that the image doesn’t have as much empty space around Candice’s lovely face as with Lara’s hero image.
When I built Candice’s website, some of her head shots weren’t as pulled back as they needed to be for the images to be full-width. There needed to be a little white space on either side so that the image didn’t zoom in weirdly on her face and cut off part of her head/torso.
If I had tried to take them full width, this is what it would have looked like:
The lesson here is that you can work with whatever the result of your photos ends up being, but you’ll need to play with it to get it to work right. And if you want a specific look – like a full width banner image – there are some points to keep in mind.
If you have questions about photography for your website, either headshots or otherwise, feel free to shoot me a message and let me know. I update this post regularly with feedback from my readers – so sending your questions helps others who might have similar questions.
Hope that was helpful,
P.S. Just be sure to let your photographer know you need a few pulled back shots, and avoid a busy background. Then you’ll be golden.