University of Bath

Using images on the website

How to choose and use images to support your content on

When to use images

Only use an image if it directly relates to your content and helps to communicate your message more clearly.

You can commission new images or use existing ones. Only use images which you have permission to use.

Image formats

Always try to use photographs, not illustrations. Good-quality photographs add context and dynamism to written content. For things that can't be photographed, like an unfinished building, an illustration is fine.

A good example of a photo and a good example of an illustration

You can use diagrams to explain concepts visually and charts to help explain quantitative data.

Agood example of a diagram

You should never use logos to decorate a piece of content or promote an event. Instead, use an image that illustrates the topic.

A bad example of a logo

Finding the right tone

The images we use say as much about us as our words do.

You should choose images that illustrate what you want to convey about different aspects of the University and reflect the diversity of our staff and students.

The image should be interesting and engaging – if you wouldn't look twice at the image, no one else will either.

A good example of an interesting and engaging photo

You should choose action and interaction over staged scenes.

A bad example of staged scene

Follow the 'rule of thirds' – images with a centrally-placed person or object do not look as good as those where the focus of the image is set to the left or right.

A good example of a photo that follows the rule of thirds

When showing social situations, avoid photographs of people who are chewing food or holding drinks.

A bad example of a photo showing three men holding drinks and talking

Images of Bath

Images of Bath itself should be dynamic, illustrating life in our historic city, making the viewer feel like they're already here.

An incorrect photo of buildings in Bath and a correct photo showing the Abbey and gardens

Images of people

When photographing people, frame them asymmetrically. Try to create a relaxed and inclusive feel and use natural light where possible.

Staff and students come from a range of cultures and backgrounds. Make sure that the people you photograph are wearing appropriate clothing and that you present any images of alcohol consumption responsibly.

Students and staff around campus

Images should appear to be observed or captured – not posed or contrived.

An incorrect photo of students posing to the camera and a correct photo showing a student in the action of juggling

Students and staff in a learning environment

We want to promote a relaxed and collaborative feel with our photography of the learning experience. Compose photographs from a student's view to provide a sense of inclusiveness. Use natural lighting.

A bad example of a photo without a central focal point, and a good example of a photo with an appropriate focal point

Person profile pictures

For staff profile pages, the subject should pose for their portrait and face the camera. Try to photograph them in their working environment, making it clearer what their role involves.

A bad example of a photo showing the subject facing away from the camera and a good example of a photo showing the subject looking directly at the camera

Images of research

People in white coats in a lab are not very inspiring. We should communicate the effect and impact of the research, rather than the process – this could be in a non-literal way.

An example of an uninspiring photo showing a researcher at his desk and a good example of a photo showing a sprinting athlete which illustrates effect and impact

Campus architecture

Some of our architecture can be challenging to photograph, but it's important that we're able to give an impression of what our campus is like.

Images should be imaginative and taken from dynamic angles. Where possible, photographs of buildings should include people interacting within the physical environment – locating them within everyday University life.

A bad example of a photo of the outside of an accommodation block whcih gives a bad impression of campus and a good example of the Parade giving a good impression of the campus

Preparing and editing images

Once you've downloaded the image to your computer, you should crop it to the correct size. You can use applications like Photoshop or GIMP to edit your image, or free web tools like Pixlr Express.

Read our guide to resizing images in Pixlr.

Images for Person Profiles

Person Profile images must use 1:1 aspect ratio. This means they should be square – the width should be the same size as the height.

These images should be at least 500px wide, but please upload at the largest size you can.

Images for all other Content Types

All other images on the website must use 16:9 aspect ratio. This includes images of people.

example image of a person at 16:9 aspect ratio

All these image sizes are the same ratio so any of them are fine to use:

  • 800px by 450px
  • 1024px by 576px
  • 1280px by 720px
  • 2048px by 1152px

These images should be at least 800px wide, but please upload at the largest size you can.

Image resolution

Optimise images for use on the web at 72dpi (dots per inch).

Image formats

Only use specific image formats:

  • JPEG – use for photographic images and for screenshots from video
  • GIF/PNG – use for software screenshots, drawings, illustrations and any non-pictorial graphics
  • SVG – use for icons, logos, maps and anything that could or should be scalable

Processing your image

Don't apply effects, overlays, gradients, borders or filters that make the image appear manipulated.

An example of a photo with a grainy effect added and a good photo which looks natural

Crop the image to highlight the relevant subject.

A bad example of a photo where the subject has been cropped in half that also has no central focus and a good example of a photo with focus on subject

Never stretch an image to fit the page as this will distort the image.

An example of a photo where the image has been stretched and a good example if an undistorted image

Avoid blurred or pixellated images. Resizing an image, especially to make it bigger, can make it blurred or pixellated.

An example of a blurry image and an example of a clear image

Don't add text over images. Text embedded in an image is inaccessible to users browsing with assistive technologies like screen readers.

An example of an image with text embedded and an example of the same image but with no text embedded

Naming your image

Give your image a meaningful file name when you save it to your computer. For example, 'university-campus-in-winter.jpg' is a good file name for a snowy shot of the campus as it describes the important elements in the image.

Always try to avoid meaningless file names like 'IMG00023.JPG'.

Adding images to your content

Uploading your image

If the content you want to add your image to is in the Content Publisher, you should upload the image to Flickr.

Read our guidance about adding images to Flickr.

If you are adding images to content in a different platform, like OpenCMS or Wordpress, you may be able to upload the image directly to that content management system.

Image accreditation

Some images require you to credit the creator when you use them. Always read the terms of an image's licence before you use it.

Include any required accreditation at the end of the image's caption. For example:

  • Image from the Foreign and Commonwealth Office
  • Image by Peter Parker (CC-BY-SA-2.0)

Alternative (alt) text

Alt text is additional information added to an image that makes it more accessible to users with assistive technologies like screen readers.

You must add an alt text description for all featured images. This description is used when:

  • an image doesn't load, for example if a user has network problems or a slow connection
  • a user is browsing the page with assistive technology, like a screen reader, and cannot see the image

Consider the Worldwide Web Consortium's advice about writing good alt text:

A good test to determine if a text equivalent is useful is to imagine reading the document aloud over the telephone. What would you say upon encountering this image to make the page comprehensible to the listener?

Alt text should describe the image within the context of the page, not use words to express the details and nuances of an image.