Website banners pose a unique challenge when it comes to taking (or finding) photos that will work for them. This short guide provides pointers on how to get the right photo for your website homepage banner.
The problem is that banners are wide…
Website banners usually have an extreme widescreen format, where the width of the photo can be 3-4X the height the banner. Take a typical website banner that’s 1170 x 300 pixels:
… and most camera photos are not …
Most cameras have an aspect ratio that’s much closer to square. Here’s a typical digital camera photo overlaid on top of the banner above, for comparison:
… so you end up with crops like this …
… vertical photos are even worse …
… and scaling the pictures down doesn’t solve the problem.
How to compose your photo for a website banner
1. Stay landscape
Don’t go vertical with your photo. Period.
2. Zoom out
Don’t photograph your subject so it fills the entire frame. Zoom way out and get lots of the background in. You’ll need a high enough resolution camera so that when you crop out the subject in the middle, it’s still tall enough to fit the banner (300-500 pixels usually.) This is how you would take the photo of the truck so it can be used effectively in a banner:
3. Leave room for text
Take the photo with the subject about a third to the left or the right in order to leave room for some text. In fact, you might take a few photos – one with the subject on the left and one on the right to provide a few options. Also, pay attention to the background. If it’s super busy, or has high contrast, it may be more difficult to get text onto it. There are solutions for this, but just be mindful.
4. Try to frame the entire subject in
In the two examples above of the person, we still framed them in from head-to-toe without anything cropped off. This is not always necessary (or possible), but it does provide the designer some extra options like cutting the person out of the background and placing them wherever they need.
5. Avoid cropping the left and right sides of the subject at the same time.
In the photo of the person, this means you can crop them at the chest, and even a bit of the top of the head. You can also crop the left or the right arm, but not both. This tip mainly applies to pictures of people. Certain things, like vehicles for example, won’t look very good with their wheels cropped off. It’s usually best to get vehicles and objects in their entirety, with some margins to include ample background to work with.
Most smartphones can take panoramic shots, whether through an app or simply through built-in tools. If you’ve got a steady hand and a great scene, these can sometimes work well too. Just be wary of moving objects and artifacts created by hand movement. In any case, they’re usually in an ideal proportion for a website banner!
Hopefully this guide helps you when selecting or taking photos for your website. And maybe explains why your designer keeps nagging you for a different photo 😉