Using images on the University websites

How to choose and use imagery to support content on your University websites.

When to use images

You only need to use an image if it directly relates to the content that you are producing and if it helps communicate your message more effectively.

Within your content you can commission new images or use images that exist in University repositories. Remember to only use images you have permission for.

Image formats

Try and use photography rather than illustrations as this gives context and life to the written content. For objects or content that cant be photographed an illustration is fine in the right context.

murray-library illustration-with-cross

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

You should not use logos to enhance a piece of content or promote an event. You should use an image that illustrates the topic or event.

logo-on-website counselling-with-disabled-student

Finding the right image

Images should not only convey the context of the writing but also show different aspects of the University. The image should be interesting and engaging. make the user look twice and be interested in the content the image is within or relative to.

You should choose action and communication over staged scenes fake scenes.

lecture-tick students-cross

The ‘rule of thirds’ – Link to rule of thirds definition & examples

When choosing imagery follow the rule of thirds as an image that is centrally placed do not look as good as where the image is set to the left or right.

Student and staff in the University learning environment

Make sure you promote a relaxed and inviting learning experience for the students and family. Use photographs from a student view with natural lighting and engaged expressions.

tutor-and-student lecture-theatre

Staff profile photos  

Make sure the member of staff is facing camera and try to make the background of the photograph be of a working environment.

Image resolution

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

Image formats

Use only these formats for images on University websites

JPEG – Photographs.

PNG/GIF – illustrations, screen shots.

SVG – icons, logos. (MORE FOR WEBTEAM USE, ASK IF REQUIRED webteam@sunderland.ac.uk)

Image look and feel

Do not stretch an image to fit a section or page this will distort the image.

students-interacting stretched-image

Do not use blurred or pixellated images. Resizing an image especially increasing in size can make images blurred and pixelated.

lab-white-coats lab-white-coats-pixellated

Naming images, accreditation and alt text

Make sure you name the file with a meaningful name. For example city-campus-students-walking.jpg. Use dashes and make sure file name does not have any spaces.

Remember to add accreditation where it is required. (e.g. Image from BBC News, Image by Bob Snow)

Add alternative text to the image where ever you can so that the images are accessible for screen readers and if a users internet connection is slow it will display the alt text of the image.

 

If you are unclear on anything or need any help with imagery come to our drop in sessions on a wednesday afternoon between 1:30pm and 3:00pm. Please contact the Web Team before attending so we can schedule this in.

E: webteam@sunderland.ac.uk

T: 0191 515 2424