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.

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

It's okay to use images with text to illustrate things on the page itself, but there must be a comprehensive text alternative in the copy of the page, as well as appropriate alt text for the image.

You should never use a diagram with text as a hero image as the text on the image would be inaccessible to people using screenreaders. Also, if the text is near the edges of the image, it won't be visible on all screen sizes.

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

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.

You should choose action and interaction over staged scenes.

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.

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

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.

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.

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.

Person profile pictures

You need a portrait shot by a University photographer. This is to make sure there is consistency in the poses and backgrounds on all our Person profile pages. You can book a photographer by completing a booking request, emailing photo@bath.ac.uk or calling 01225 385478.

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.

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.

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

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 X photo editor.

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.

Hero images for subject and course pages

Subject and course pages have a large image across the top of the page. Depending on the size and shape of their screen, some users might not be able to see all areas of the original image.

Use the image cropping template to crop your image, making sure the subject of the image is framed by the central box. This will guarantee that users can see the important parts of the image on any screen size.

Images for all other Content Types

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

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.

Crop the image to highlight the relevant subject.

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

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

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

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 Typecase (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 in Flickr

You may need to change an image in Typecase. To do so you'll need to find the image used in Flickr.

You can search directly for images in Flickr with the search function. You can also find an image by using part of the image URL located in Typecase.

Any image already added to a content item in Typecase has a Flickr URL. For example:

https://live.staticflickr.com/7824/33707888938_fdfdc0c949_b_d.jpg

To locate this image in Flickr, copy and paste the number image number id, in this case, 33707888938, to the end of the following URL:

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

The new URL created (http://flickr.com/photo.gne?id=33707888938) will take you to the image location page in Flickr. From there you can amend or replace the 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 Typecase to describe what the video is and what it shows.