Images and video are used as supporting content on the University’s websites.
People don’t tend to prioritize our websites specifically for images or videos – they visit for information; your content.
That said, content can be greatly enhanced by using images or video to support your messages if they are used in the right context. So what is the right way to use them?
Choosing an image/video
High Quality
Use only high quality images. Images should not be blurry, stretched or pixelated. There is a range of University photography you can use in the photo library. Always preview your image to check the quality before publishing.
Videos should be selected from an official University YouTube channel and embedded in your site. Don’t upload the original video file directly to your website.
Support the content
Images and videos are supporting messages. They should always make sense to the user, their job is to help to enhance the meaning of your page. Your content should provide the context for the image/video.
It’s important your images and video is relevant to the content on the page. User testing increasingly shows that people are feeling more and more negative towards the use of generic stock images.
Less is more
If you have too many images or videos on a page, you can compromise the effectiveness of your content. They can:
- slow page load times
- interrupt the reading experience
- make pages disjointed and harder to read
Images of text and complex images, like flowcharts or graphs, can also present a barrier for users accessing your content, and should be avoided.
This content in the image is effectively invisible to users of screen readers and anyone viewing the text only version of your site, for example a mobile user with images turned off. It is also impossible for search engines to index this content – so if you want people to find this information, use content!
If you must include a complex image in your site then a text alternative of the essential information contained in the image is required.
Image size and orientation
For sites edited via Contribute the standard image size is 320 x 180 pixels. We recommend that you use landscape images. Specific templates may have alternative sized images for banners and grid layouts.
Sites edited in T4 have many image options. For these size requirements you can view the image guide on our demo site (University login required).
Keep an eye out for a future post on editing images.
As videos are embedded onto your webpage, your website template should automatically provide you with the right size and a preview image for the box. Just look at our support pages to find out how to embed a video (University login required).
Alt text
Alt text provides alternative, textual content when an image cannot be displayed or for users of screen readers. It should be descriptive, but not necessarily a literal description of the image. Think about describing what the image represents.
Linking images
Many of our websites contain pages with grids of images, for example the Open Day landing page. Linking the image used here increases the area a user can ‘click’ or ‘tap’.
This is useful for mobile users who may be trying to select links using their finger or a stylus. Image links should always be supported by links in the text of your page.
Social media
Individual posts and campaigns run on social media are ideal for hosting video content. These channels tend to be seen as more engaging for people, as they can so easily share content – but more importantly, they enable people to talk directly to us.
Consider using social media alongside your website in this way to help your messaging. Social media can help direct people to your website, and your website should connect people to your social media.
Find out more about using social media in this way from the University’s Social Media Team.
Final thoughts
So that’s your whistle stop tour of improving images and videos for your website. These assets should always be used to enhance your pages, to enable people to better engage with your content. Find out more from our guide to images (University login required).
