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.
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.
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 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.
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
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.
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.
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.
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.
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.
Optimise images for use on the web at 72dpi (dots per inch).
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 the Content Publisher, you should upload the image 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.
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.