University of Bath

Using images on the website

How to choose and use images to support your content on bath.ac.uk.

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 the people you photograph are wearing appropriate clothing and you present any images of alcohol consumption responsibly.

You should also check for unconscious bias in your choice of pictures. This may only become apparent over time. You should make sure images don't reinforce negative or stereotypical attitudes especially for ethnicity, age or gender. Studies have shown this can happen without us even being aware of it and requires positive action to avoid.

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

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 subject and backdrop with a shallow depth of field
  • 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

A good example of a photo with a close crop of an active scene and a bad example image of two people posing with no activity

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 these pixel dimensions are fine to use:

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

Pixel dimensions should be no smaller than 800px by 450px and no larger than 2560px by 1440px.

Image file size

Images uploaded to the site should be no larger than 1mb as this will help us make sure page loading times are kept to a minimum.

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.

Locating your image on Flickr

You may want, or need, to change a specific image in Content Publisher. To do so, it will be help you'll need to find the image you used in Flickr.

You can search directly for images on Flickr with the search function but there us a quicker to find your image. You can do this by using part of the image url located in the Content Publisher.

Any image already added to a content item in Content Publisher have a Flickr url , for example:

https://c2.staticflickr.com/6/5790/30278300174a8430f9036b.jpg

To locate this image in Flickr, copy and paste the number 30278300174 to the end of this url:

http://flickr.com/photo.gne?id=

The new url created (http://flickr.com/photo.gne?id=30278300174) will take you to the image location page in Flickr. From there you can amend or replace your image as required.

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.

How to write captions for images used on the website

It's important to know the difference between image captions and alt text descriptions.

Captions must quickly tell the viewer what the image itself cannot say, such as people, places, dates, and importance. Captions need to add information to an image. Captions should never describe the image.

Every image on the website needs a caption. A caption cannot be more than 255 characters.

A good caption example is: 'During his visit to the University, HRH Prince Harry met Professor Keith Stokes and the team behind the rugby science work.' This example contains all of the key elements of a caption, explaining who is in the image, what they are doing, why they are doing it, and where they are.

Some dos and don'ts for best-practice caption writing:

Try to:

  • use present tense to describe the image and any action
  • keep your captions active (wherever possible)
  • think in headlines – punchy and concise is good
  • explain the unknown and/or unshown - what's happening in the image that the reader can't see or know
  • provide answers your user might have about the image

Avoid:

  • giving readers information they get from looking at an image
  • beginning with an indefinite or definite article e.g. 'she' 'it' 'a', 'an' or 'the'
  • writing 'above' or 'pictured'
  • repeating information contained in the title or summary

Images that don’t need captions

  • background images used in the page design
  • banner images used at the top of a page
  • logos

Video captions

Remember to add captions to video stills. Use the caption field in Content Publisher to describe what the video is and what it shows.