You’ve probably dealt with blurry photos before. You go to a site like Snapfish to order your holiday photos. But after you upload the photos, an annoying little exclamation point warning pops up telling 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. The same thing can happen on your website — blurry photos — if you aren’t careful. Keep reading for tips to avoid this problem!
no one likes blurry pictures
This is me sending you a little warning icon 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, 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 empty 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, the subject.Â
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 Aimée C Gianni’s website, her header image has a lot of empty 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!
Now, if you’ve gotten photos prior to reading this and none of them have lots of empty space around you, not to worry. They can still work well for your website.
To make photos without empty space work, just choose a design for your website that allows you to have images next to text instead of on full-width photos. The result can be just as lovely. See Amber Haider’s and Sarah Smith’s sites for examples of photos without empty space around the coach.
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 with lots of objects or patterns. 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 page.
where to take photos
Sometimes my clients ask me, “Where’s the best place to take photos? Inside or outside? Should I have a casual or professional vibe? What’s best?”
The answer to those questions depends a lot on you. How do you want to portray and position yourself to your business audience?
Are you the professional medical doctor turned coach, who wants to show up in a business suit in your office? Or are you the relatable mom who coaches moms, and so want to dress more casually and lounge on the couch or outdoor coffee shop?
I always say, think of how you’d dress if you were going to greet a new client. Then dress and present yourself that way on your website. Read this post for more on how to dress for website photos.
have questions?
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,
Jennie
P.S. Just be sure to let your photographer know you need a few pulled back shots, and avoid a busy background. Send the photos to your developer in the highest resolution possible. Then you’ll be golden.
