Before you decide to add an image to a web page, you should first read our guidelines for when to use images on the website.

Consider the purpose of your imagery

When deciding to add an image to a web page, it is helpful to first determine the purpose of your image. There are three main types of image we use on the website:

• decorative images – these add visual appeal to pages but don’t provide any additional information (for example, Hero images that sit behind page titles)
• informative images – these add value to the content on pages, conveying information that complements the words, such as headshots on a Team profile page
• complex images – graphs, charts and diagrams are complex images and, for accessibility reasons, should be used sparingly, if at all

Consider whether an image will add any value to your page at all. If not, and your page content doesn’t lend itself easily to a decorative image, you don’t have to add one.

Make your images accessible

The type of image you choose for your page will inform how you make it accessible.

Read our guide to making images on a web page accessible to learn more.

Finding the right tone of image for our website

The images we use say as much about us as our words do. For this reason, it’s important to choose images that complement your words while also conveying the best of what we represent as a university.

General tips on photo composition

Wherever possible, photos on our website should:

• reflect the University as it currently is (that is, not showing clearly outdated elements unless specifically chosen to illustrate something in the past)
• engage the viewer through subject matter, framing, or both
• show students or staff engaged in activity rather than posing for and looking directly at the camera
  
• use a shallow depth of field (blurred background with a sharp focus on the subject), and well-lit with natural light
  

Illustrations, graphics, and ‘homemade’ images

Most images on our website are photos, but certain illustrations and graphical elements can be used, such as logos and accolades. However, non-photographic images can cause accessibility problems or look cheap and unprofessional.

Clip art and emojis

Don’t use clip art or emojis as they make website images look unprofessional.  In addition, they are, along with text on images, inaccessible as screen-reading software cannot read them, excluding users with low or no vision.

Campaign materials as Hero images

Do not use promotional or campaign materials for Hero images. Hero images are often used for decorative purposes and should not include any text as this is inaccessible and will clash with the page’s title and summary.  

Word clouds

Do not create word clouds to use on a web page. These are not accessible as assistive technology can’t read any of the words. 

Complex images

Complex images are used to show data or detailed information like graphs and diagrams.

To make a complex image accessible, there must be a text equivalent on the page so users who can’t see the image can understand what it’s showing. Do not use complex images for hero images or pinned items. 

Composite images

A composite image is when multiple photos are used to create a single image. These are not accessible to all users as there is too much visual information and this could be overwhelming and difficult to process. If you want to convey a range of photos from an event or relating to a topic, consider embedding an image gallery.

Diversity and inclusion

When people don’t see themselves in imagery, it makes them feel invisible. So, every time we add images to our website, we have an opportunity (and responsibility) to represent the spectrum of human expression that exists in our community.

Considering Protected Characteristics – as outlined in the 2010 Equality Act – is a good way to challenge stereotypes (and our own unconscious biases) when choosing images. These characteristics are:

• age
• disability
• gender reassignment
• marriage and civil partnership
• pregnancy and maternity
• race
• religion or belief
• sex
• sexual orientation
  

Use context to avoid tokenism

We’ve all seen images that are inclusive, but which feel forced and fake. To avoid tokenism, consider the context of the page your image will appear on.

Not every image is going to (naturally) include every protected characteristic, but does yours reflect a variety of faces, bodies, cultures and lifestyles that makes sense for the content of your page and its intended audience?

Challenge stereotypes

You might not mean to, but it's very easy to reinforce stereotypes in your images. By challenging not only who appears in images, but how they are depicted, we can replace unconscious generalisations with conscious choices.

For example, instead of choosing a clichéd image of an elderly person, bent and walking with a stick to accompany a story about research into ageing, why not use an image of an older person exercising or socialising?

Consider placement and power in roles

Power dynamics are at play in many of the images we use at the University. The most obvious example of this is where we show staff and students together in lectures or classes. But, even when we show a group of students working together, it is important to think about who is prioritised in the image.

For example, who is in the foreground? Who is leading the action and or commanding attention? Who has explicit or implicit authority? By depicting people with a variety of different characteristics as the focus of our images, we convey that we are a community of possibilities.

Research

Wherever possible, photos of research on our website ought to:

• have a human focus – for example, a photo of a mass spectrometer is good, but a photo of researchers using the mass spectrometer is better
• help to convey the full spectrum of research carried out at the University, and not solely depict people in lab coats

Exceptions

General exceptions

Of course, not every one of these ideals will apply to every image on our site. For example:

• a portrait destined for a profile page will be both posed and, most likely, have the member of staff looking directly at the camera
  
• logos and accolades will, necessarily, be illustrations
• not every photo on our website will convey the full diversity of our community

If you have any queries about finding the right image for your content, email the Digital Content team at beta-content@bath.ac.uk

Officially approved exceptions

There are a few departments and teams within the University that, with the approval of the Director of Marketing and Brand, follow different guidelines for some of their images.

The School of Management, for example, has its own visual identity. Similarly, the Institute for Policy Research (IPR) has permission to use a distinct style of graphical illustration on its pages.

Any queries about getting approval for a branded style of image to represent your department or team should be addressed to the Director of Marketing and Brand at web-support@bath.ac.uk

Tone and Typecase page types

The Typecase page type you’ve chosen for your content can also help you to decide on the right images for your page.

Announcement

An effective image for an announcement will convey an aspect of the timely information the content is covering. This is a rare circumstance when a posed photo – of a group of academics celebrating an award for example – can be appropriate.

If the image you are considering for your announcement is purely decorative, you probably don’t need to add an image at all.

Campaign

The purpose of Campaign pages is to promote (and raise awareness of) aspects of the University. Because of this marketing function, images should ideally be professionally sourced and candid, with a shallow depth of field.

If you’re not sure if an image you’d like to use is appropriate for a Campaign page, ask yourself if it shows off the content in a suitably professional and polished light.

Case study

A Case study usually describes the activities of an individual or group. Images must be to a good standard, however, there may be a variety of imagery, for example a Case study may include:

• a posed, professional photo of the student or member of staff involved in the story as a Focus image
• one or more informal shots of the people involved in project activities as Associated images
• a complex image, detailing some aspect of the work being done that is explained in the text

Corporate information

Corporate information pages convey information about the University primarily for users’ reference. It is rare for content on a Corporate information page to need (or benefit from) imagery.

Event

Like Campaign pages, Event pages have a promotional function. As such, they can benefit from images that communicate the benefits of attending. For example, if you’re advertising an annual event, you may want to feature an image depicting people enjoying last year’s event.

Do not use ready-made posters as an Event page’s Focus image if they contain textual information that isn’t replicated elsewhere in the body of the page. Text in images cannot be read by assistive technology, making it an accessibility issue.

Guide

Guides give people step-by-step instructions to complete a task or follow a process. As such, they do not need decorative images.

Depending on the content, you may want to add informative images that clarify steps in a process. You can do this with Associated images in the Narrative component. If required, you may also add inline images. However, as a matter of accessibility – specifically for users with low or no vision – images like this should only complement your written guide, not replace sections of it.

Images used to illustrate our courses

Images used to illustrate our courses should:

• involve students interacting with each other or their course activity
• have a clear, sharply focused subject and blurred backdrop
• focus on the student, not the facilities around them
• be cropped close up
• not feature students staring directly at the camera
• not feature students with forced smiles or looking unhappy
• look as natural as possible and not staged

Landing page

Landing pages collate multiple pages about a University faculty, department or group and, as such, the Hero image should convey what work they do. The photo should be professionally sourced and candid, with a shallow depth of field.

Try to avoid using generic imagery, such as scenic photos of the campus or lake, as they can make it harder for visitors to know what the page is about. In many cases, if you do not have a suitable image that is specific to the department or team then it is best not to use one at all.

Do not use a graphic as a Hero image unless you have been given permission to do so by the Director of Marketing and Brand.

Location

To help people find a location more easily, it’s a good idea to add a photo to your Location page. It should be a simple photo depicting the exterior of the location from a perspective that will readily identify it for most visitors as they approach it.

Person profile

The image added to a Person profile page should be a head-and-shoulder portrait of the role holder featured. Ideally, this will be a studio portrait taken by the University photographer. Don’t crop a photo taken in another context, such as a holiday, as a Person profile photo.

Project

Images on Project pages should help to give it context and tell its story. For a research project, this could include a Hero image showing people engaged in the research, an informative image such as a diagram showing a detailed part of a process, and informal shots of a presentation made by the project team.

Consider how your images will look on desktop and mobile

More visitors to our website use mobile devices than use desktop PCs or laptops. For this reason, it’s always a good idea to preview your page (and the images on it) on mobile as well as laptop or desktop screens. This way you can judge if your chosen images will work well once your page is published.