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

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

Read how to pick content images

Background images

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)

Read how to use background images

Content images

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?

Laboratory Equipment (fig. 1)
Laboratory Equipment (fig. 1)
Electron micrograph (fig. 2)
Electron micrographs like this are used by
scientists to compare surface structures
of normal cells with cancer cells. (fig. 2)

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?

Data highway (fig. 1)
The data highway (fig. 1)
Kids celebrating
Two children celebrating the web (fig. 2)
Browsing the web (fig. 3)
Using the web in an everyday situation (fig. 3)

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:

  1. 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.
  2. 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 :-)

    Old Computer Terminal (fig. 4)
    A terminal connected to Australia's first internet-connected computer 25 years ago (fig. 3)

#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:

Multiple nature images with different colours (fig. 1)
Multiple images without colour correction (fig. 1)
Multiple nature images with adjusted colours (fig. 2)
The same images after adjustment of colours and contrast (fig. 2)

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.

Texas Registered Drivers 1980–2004 (fig. 1)
Texas Registered Drivers 1980–2004 (fig. 1)

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.

Texas Registered Drivers 1980–2004

Texas Registered Drivers 1980–2004 (fig. 2)
The number of registered drivers in Texas rose from
initially 10 million to 17 million drivers between 1980 and 2004 (fig. 2)

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.

Texas Registered Drivers 1980–2004

The number of registered drivers in Texas rose from
initially 10 million to 17 million drivers between 1980 and 2004 (fig. 2)

Ideally all charts put on our websites would be more like this. This chart is created using Javascript, HTML and SVG graphics. It doesn't use traditional images at all. This requires a bit of coding knowledge, but it can be done and is easily the most preferred version. It is easy to read both because the graphic is created using vectors (and is crisp on any display, including retina displays), but also because detail about the plot can be gained by interacting with the chart. It is also responsive so that it displays well across a range of device sizes. We are aiming to provide these charts in the Design System at some point, however they will require a smart CMS interface.

Background images

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.

Bright background image with text on top (fig. 1)
Bright background image making text too hard to read(fig. 1)
Bright background image with dark layer between image and text (fig. 2)
The same image with a black layer between image and text making the text readable (fig. 2)
Portrait of Glyn Davis overlaid with text (fig. 3)
Never use portrait photography. (fig. 3)
Group of students (fig. 4)
Always remember that images will be cropped according to the current screen size and ratio. (fig. 4)

#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.

Study findings about the universe (fig. 1)
This background image shows actual study findings (fig. 1)
Space (fig. 2)
A different image sets the topic as space, universe, etc while not distracting the reader (fig. 2)

#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.

Picture of old lab and scientists (fig. 1)
Black and white makes us feel like something is older (fig. 1)
Picture of old lab and scientists (fig. 2)
Red filter (fig. 2)
Picture of old lab and scientists (fig. 3)
Purple filter (fig. 3)
Picture of old lab and scientists (fig. 4)
Blue filter (fig. 4)

#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.

Image resources

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.

Free images

Make sure these images are really free to use by always checking their individual license.

Stock photography

Next: Audio & Video guidelines