Choosing & using images on websites can be quite difficult. This guide makes you aware of things you should consider when choosing imagery.
Images can be a great way of helping readers understand what you are trying to communicate. Good imagery informs, captures attention and even persuades visitors. The wrong image, however, can confuse, misguide, annoy or even repel. You may never get the chance to correct the negative impact of the wrong image.
Before you look for an image at all though, you should start with the most first important question...
Do I need an image at all?
Using an image for the sake of using an image is usually a bad idea. There should always be a clear purpose for every element you include as each either supports or detracts from the purpose of the page. If it doesn't need to be there, get rid of it! Sometimes (read: often) you are given an image and told you have to use it. Even in this case - indeed, especially in this case - you should challenge this requirement.
Deciding whether you need an image requires being aware of what the user is trying to accomplish on your page. Is the page a guide about how to connect to the wireless network? Or is it an in-depth article about the latest discovery in the field of neuroscience? In these cases, an image will likely be very useful in helping either establish an emotive connection or a more instantaneous understanding of what is being discussed. If, however, the page is a course listing, highly functional contact page or contains entry requirements, you probably don't need an image. By adding one unnecessarily, you are standing between the user and the task they are trying to achieve (eg. find a course or find contact details respectively).
There is often a blurry line when choosing to use an image. If you're torn, it is always good to ask yourself if an image would be helpful or not? Lets have a closer look at the purpose of images.
What's the purpose of the image?
It is useful to distinguish between the two different types of images often used on web pages: the content image and the background image.
Content images explain, inform or generally adds value to your content. The background image on the other hand, sets the scene, complements your content and even changes the mood of the user.
So what's the difference between them with regards to how they are displayed in the design system?
Content images are displayed within the text flow, can have captions and are never cropped or masked with text
- Explains content in a better way than text (infographics, etc...)
- Displays what the text is talking about (pictures, items, etc...)
- Shows a person
- Offers additional information
Background images usually have text on top of them and can be cropped according to the device size. This means that not all parts of the image are visible at all times
- Complements your content
- Sets a mood
- Sets a color scheme
- Hints what the topic is about (without attempting to show something crucial for the content as they could be covered or cropped)
The science of choosing and using content imagery is actually easier than one might think.
Picking images for content is definitely easier than selecting background images. You don't have to worry about sizes or cropping as they are always shown in full proportion. However here are some guidelines to be aware of:
#1 Add information
If an image does not add any information to the page it shouldn't be used in the first place. Still, some images provide more information than others:
Imagine you're writing an article about cancer research. Which of these two images provide more information?
Okay, that was easy. Although the laboratory shows a bit of movement, it is rather generic and could be used in any other article relating to laboratories. The micrograph on the other hand needs a caption to explain what the user is looking at, but adds a lot of value by visualising a topic the reader may have trouble comprehending.
Hint: If you can't think of a caption that relates directly to your content, the image might not be a good choice.
#2 Convey the right feeling
Look critically at image details to ensure the image communicates the right mood to the audience. Get a second opinion about how an image might affected them.
As an experiment, pretend you were given the following three images to complement an article about celebrating 25 years of internet in Australia. Which one would you choose?
This one is tricky. Of course the "data highway" is not appropriate in any way. Yes it's colourful, but it doesn't add anything meaningful. However, the decision between the children and the tablet is a bit harder. The everyday browsing may look adequate at first but there are two arguments not to choose it:
- It is a very generic stock photo. We see them all over the internet and we've stopped being emotional about them all together. It nearly feels like an advertisement for a tablet.
- The visible screen could potentially show unwanted content. This may lead to more work such as montaging a different screen into the tablet.
The children on the other hand are celebrating, pointing towards the laptop and there is no screen content visible. Furthermore it is the only image that shows human emotions to which we respond positively. It also compliments a possible headline that contains the word celebration in some form. Therefore photo number 2 would be the recommended photo to use in this case.
Bonus image (click me)
Or you could scrap all of the above, do some research, and find an actual photo of the terminal connected to the computer that established the first internet connection 25 years ago :-)
#3 Be consistent
If you are going to have many different images close together on a page (for example, using a visual listing component in the design system), it is important that they use consistent colours and photographic style:
While all images are related to the topic nature, they feel disconnected in the first row. Colour corrections and contrast adjustments bring them closer together and provide a more coherent experience. This requires a bit of photoshop skill, but is worth the effort.
#4 Charts and infographics
Charts and infographics are a good way of displaying statistics or illustrating processes. Just be aware that if there is no html-based text (or at least not much of it), the image containing the chart will be displayed on small screens as well and therefore resized. This may make it impossible to read for a large portion of your visitors.
This chart is heavily formatted and therefore hard to figure out. It also contains too much text which will make it difficult or impossible to read on smaller screens.
The same chart works much better as all uneccessary formatting and redundant information has been left out. The header and caption are written in HTML which means they will be accessible to both google and screen readers. Using the caption as a sneaky way to summarise the table also adds value to this piece of information. You can understand what this chart is saying without viewing it.
Start with a bang and engage with your readers right from the start
The right background image can easily boost any message you are trying to convey to your audience. Selecting the right image however can be quite involved. Before you start searching for that perfect image, you’ll need to make a few considerations to ensure you’re picking the best image possible.
Here are some of the best practices for choosing your perfect background image.
#1 Don't forget the text
A background image almost never appears without text on top. Always make sure that the text is easily readable because it is always more important than the image. If the image contains information that should not be cropped or overlaid by text, then it is a content image and should not be used in this context.
#2 Reinforce without explaining
Choose a background image that will compliment or even help explain your message. Use your background image to reinforce the overall message, not as an attempt to communicate everything all at once. Don’t pick an image that draws more attention than the primary objective (read the content) of the page.
#3 Only use gigantically sized images
Because of the vast amount of different screen sizes the image has to be highly scalable. From small phone displays to massive 27" Retina screens and everything in between. In a perfect world, you wouldn't have to take care of any further optimisations but we're not there yet. Depending on your CMS or technology, your image may be resized automatically but if you're not sure ask your webmaster if the webserver deals with it or not.
Generally we recommend the minimum width of a background image is 2000 pixels.
#4 Think about the colours
Through associations with natural, cultural and artistic uses of colour, we subconsciously relate different colours with particular characteristics. Controlling the use of colour in your background images (which take up a huge chunk of space on the website), is a good way to reinforce your message.
#5 Don't get attached
Getting too attached to a particular image is never a good idea. Try playing with different angles on a topic to find images that might fit better. You will be surprised how many different images you sometimes find by letting go of the one image you were given or you picked yourself. Sometimes you might go with your first choice, but often you find something that fits even better. Get creative, but not attached!
#6 If you can't find an image, don't use one
That is by far the most important rule. Remember the first paragraph of this article?
Images can be a great way of helping readers understand what you are trying to communicate
And do you remember the third sentence as well?
The wrong image, however, can confuse, misguide, annoy or even repel. You may never get the chance to correct the negative impact of the wrong image.
This is really important to keep in mind at all times. No image is sometimes better than some random image that does not help your message at all. Not have an image will definitely help your page load faster.
Knowing where to find all the good images
There’s a number of places online where you can find potential images for your page. As with most resources, there are paid and free versions so make sure you choose an appropriate license for your purposes.
Make sure all images comply with the university image guidelines.
Make sure these images are really free to use by always checking their individual license.
- University of Melbourne Imagebank
- Little Visuals
- Death to the Stock Photo
- New Old Stock
- The Pattern Library