Choosing and composing images for use on a website can seem challenging, but with some basic knowledge, it is easily demystified. We’ll cover what makes a great photo for editorial use, how to choose your imagery and what sizes you should use to make sure your images look their best.

What is a banner image anyway?

A banner or “hero" image is the big picture that you often find at the top of your website. It might be in a “carousel” of images that progressively replace each other. They’re often characterised by having text laid over the top. It’s this crucial addition that changes the entire use of the image, from being simply pictorial to being part of the wider story you’re trying to convey. You can see some examples below: 

Banner image on Creative Youth Network website

Banner image on Old Royal Naval College website

Banner image on Regen SW website

Once you’ve added that text, the image is no longer just a great photo where the object is to display the subject perfectly. Instead, the image is now there to support the narrative you’re trying to achieve, and therefore some compromises can be made to make text more legible. 

It’s also part of a wider design scheme, and so can be manipulated to achieve the correct tone of voice. Once you’ve made this mental shift away from “this is a great photo” to “this is a great photo to support my narrative”, you’re on the right track.

What to look for in an image

Something that usefully supports your story 

Imagery should enhance your narrative. It’s best to choose one with impact and emotion, especially for fundraising campaigns.

As importantly, you should also look for something that’s authentic. In other words, ideally not stock photography, which stands out as such. An audience can sense the lack of authenticity instinctively. Better to have an image that genuinely reflects your organisation, even if it’s technically less than perfect. This is all about building trust with your audiences.

Aside:
There may be times when you have to use stock pictures. Try these free sources:

Testing

If you’re not sure which image to choose for a particular campaign, you could try using “Emotional Response Testing. This process gathers feedback from a target audience by asking them to rate what’s put before them on a set of emotional criteria, for instance on a scale between friendly and intimidating.

Putting several images before the tester group will allow you to judge if an image is really conveying what you think it is. You could even test for much more subtle “tone of voice" things, such as whether using a filter (think Instagram) will play better with your audience or whether they respond better to unedited, more raw-feeling imagery.

You should probably test using the proposed accompanying headlines, since context is very important and can change the message of an image completely, as below.

People (humans respond to humans)

Humans are wired to read faces, so using people in an image will have real impact (so long as they’re photos of real people). That said, faces are so powerful that they can distract from your call to action if you’re not careful with your design. One great trick is for the faces to be looking towards your call to action – we instinctively look where others are looking.

A few other things to look for:

  • A strong subject, excluding distractions by cropping if necessary
  • Few disruptive patterns, which can make text hard to read
  • Shallow depth of field (aka “bokeh” or "a blurry background"). This helps the subject (and any text) stand out.

Aside: Working with a photographer:
If you’re lucky enough to be able to work with a photographer, give them the best shot at getting great images for you by briefing them on how images display on your site. Make sure they’re aware that you need space for text, that the images are landscape not portrait and that you need a strong subject. Show them the layout and ask them to bear it in mind when shooting.

Size and orientation

Size

Photos do not scale up well, regardless of what one sees in cop dramas where a CCTV camera zooms in to get more detail. In reality, you need to be starting with a good-size image, at a minimum of 1200 pixels wide for a large “hero” image (the main image for your page, usually found at the top). Even bigger is great, because it gives you more flexibility when cropping, as we’ll see later. If you only have an image 600px wide, that’s probably not going to cut it.

Aside: Try to get original-size JPGs from the camera if you can. Rarely, you may inherit RAW files, which are essentially "digital negatives" straight out of camera, but these require more work to edit and file sizes are massive, so will take up a lot of space on your hard drive and are slow to move around. These are best avoided unless you’re a complete control freak.

Orientation: start with a landscape image

Most screens are “landscape” orientation (i.e. wider than they are tall), and websites tend to reflect that in terms of how they display imagery. That means that starting with a lot of “portrait” images (taller than they are wide) is likely to be problematic.

It is of course possible to crop a landscape image from a portrait-oriented photo, but unless you’re starting with a really big size, you might not get the dimensions you need.

If your image is 1500x1000px in landscape mode, that’s easy to crop down to a desired 1200px wide. However, if the photo is the same size but portrait, your horizontal width starts at only 1000px, which means you don’t have the pixels there to achieve the desired width.

Landscape and portrait images showing limited potential for portrait image to be cropped to use as landscape image

Space, man

One of the chief considerations for choosing an image should be finding one with the space available for adding text. If you have an existing site, take a look and see how the text falls over a big hero image. Chances are that in certain places there’s some defined space for the words to show over the image, and that this placement is the same for all images (it’s placed programmatically, after all).

We want to achieve two things:

  1. That the text does not cover the main focus of the image,
  2. That the text is legible over the image.

So, if your text always overlays the left third of the image, it’s wise not to choose an image with the important detail in that space.

Similarly, depending on how the text overlays the page, that text has to be legible. That means avoiding the pitfalls of disruptive patterning and big contrast changes under where the text sits.

Note: It’s worth remembering that your website is “responsive”. That means it responds to the size of screen it’s being shown on (i.e. it rejigs the content to work on your smartphone). To achieve this, text will tend to reflow and images resize, so it’s worth checking how your image behaves at sizes smaller than desktop – try squishing up the browser window until it looks more like what a phone might display.

Final tip – and one no-no

Not every photo will work in every context. It’s best to accept this and move to a position of pragmatism. With practice, you’ll instinctively start to edit imagery quickly based on the requirements of your site.

Try not to use an image which already has text on it. It’s very confusing to the eye and renders both the artwork text, and the site’s overlaying text, largely unreadable. That means no artwork from campaign fliers, posters or invites, unless a tame designer can re-work it properly to work with your site.

Signing off

Hopefully you’re now feeling more confident choosing imagery for use in the big banners and carousels on your website. Just to recap, the main things to bear in mind are:

  • Start with landscape, rather than portrait imagery if you can
  • Bear in mind where the text is going and how it’s displayed
  • Adding text changes the fundamental use of the image. Think in terms of your narrative.
  • Not all images will work in all contexts, even if they’re great images.