The number 1 rule for selecting website imagery

There is an art to selecting certain images for website headers, banners or quick links. Any web graphics or photography needs to fit in the frame holders provided on the site, while they will also often require text (or other elements) overlapping on top of the image; particularly within banners. These two requirements can be fulfilled by sticking to one golden rule when selecting imagery for website design.

Give the focal point of your imagery enough ‘fat’.

Many shots appear perfect in isolation, but don’t transfer particularly well to a website platform. Here’s a quick explanation.

Check out our website hero Brian, eh? What a man.

Meet our hero, Brian. Not really fat at all, is he? However, he is the star of ‘our website’, and he needs to be displayed clearly on the ‘hero banner’. Most images (like the one above) are captured at a 4:3 ratio, while most banners are much wider, often around 4:1. Resulting in unfortunate crops; like this.

As you can see, the focal point takes up much of the frame, leaving little room for our hero to ‘breathe’ and certainly not enough space for any accompanying text. When we say, ‘give the imagery fat’, we refer to the area around the focal point of the shot, so the designer can ‘trim the excess fat’ when positioning the image in the frame.

Now, let’s try this again, except we’ve retaken the shot from further out.

See all the space around the Brian, plenty of fat to trim.

Then we apply the image to the website banner specifications…

Now, isn’t that much better! Both the ‘hero’ (and even some text) have enough room to be seen clearly without cluttering the frame, thus making the message of the imagery easier to interpret. People, faces, buildings or products (basically any ‘hero object’) shot for a website should ideally have some ‘fat’, and be flexible enough, to be repositioned into a website header, banner or quick link frame.