Using imagery effectively

If used correctly, imagery can have a tremendous impact on the aesthetics of your website.

Appropriate photography can turn a dull and lifeless passage of text into a visually interesting and appealing web page.  Images can instantly convey feeling, mood and atmosphere that is often very difficult, if not impossible, to express by other means. Imagery can instantly tell the user what your web page is about and improve the understanding and accessibility of your content.

However imagery must be used with care. Using inappropriate imagery can be distracting and misleading. Too many images, or styles of images, can cause visual clutter. And certain styles of imagery, such as a traditional montage, can make your website appear dated.

Take a moment to think about...

Before you add an image to a web page ask yourself the following questions:

Is the image appropriate to the topic/content of the page?

Images must be related to the content of the website and/or the specific web page. An image must not be added just because it looks nice, it must also have a purpose.

Please try, wherever possible, to choose subject specific images rather than generic buildings, campus shots or smiling students. The best generic images are used extensively in the corporate level of the university website, departments and offices should select images that distinguish themselves from each other and highlight their expertise.

Is the image too big/too small?

Images that are too large can dominate your web page, ‘squash up’ your text content, and take too long to download. Images that are too small can be illegible. This is especially true of images that contain text such as annotated diagrams.

Are there too many images on the page?

Too many images on a web page can cause visual clutter and make the page much slower to load. Typically ‘less is more’ when it comes to imagery.

Do I need to show the entire image?

Occasionally it’s only necessary to show part of an image. Cropping can be used to remove redundant space, to improve composition, or for stylistic purposes.

See: Cropping Images for examples.

Photo/graphic styles

Depending on the effect you are trying to achieve there are some basic styles of photo that conjure instant, if somewhat subjective, results. The content of the photo clearly also plays a part.

A black and white photo A colour photo A tinted photo
Black and white photos lend an air of seriousness and sophistication but can also create a sombre or historical feel for a site. The opposite is true of colour photos - life, energy, fun, modern. Tinted photos benefit from elements of both black and white and colour being sometimes sophisticated but also modern and stylish.
A close up photograph A long distance photo  
Close up shots of objects can give you a general impression e.g. a close up shot of a bit of technology might make you think hi-tech but without thinking about that specific object.  Distance shots can often be quite calming and natural - these tend to be landscapes, cityscapes or shots of the sky. They give a sense of space and time.  

Photo/graphic associations

The subject matter of photographs often has associations that may have an effect on your users’ perception of your site.

A footballer kicking a ball Scientific apparatus 911 Attacks

If we see a photo of a footballer kicking a football then we instantly think of sport.

Some chemistry apparatus containing coloured liquid makes us think science, even if it’s not very realistic.
A photo of the 9-11 disaster might make us think about terrorism and its wider implications.

The list is endless - and imagery is used in the popular media all the time to convey certain associated messages. You can use these associations to your advantage when thinking about imagery for your website.