Images
Adding images can make a webpage more engaging, but you need to make sure that they are accessible. You should be considering accessibility when you choose an image, and when you upload an image to T4.
Choosing images
Avoiding text
Accessibility regulations state that you should avoid using images containing text unless they are:
- Essential (Eg a logo or a photograph of a sign)
- Customisable by users (Eg the font, size and colour can be changed)
The T4 content layouts also mean the text in your image will often be too small to read. Find out more about choosing impactful images.
Charts and infographics
Unless content from your chart or infographic is also added to the webpage as HTML, it will not be accessible. It is not advised to add all content from an infographic as alternative text. Instead, add it to the body of the page in the form of a caption.
Permissions
Using images without the correct permissions could cost your team thousands of pounds. You should only use images from our approved media libraries. Find out more about image permissions.
Consent
If you are using images you have taken yourself, you need to make sure you have the correct consent. Find out more about Queen Mary's consent process.
Uploading your images
Before uploading your image to T4, make sure it's an appropriate file size. If your image file size is too large, it will make the webpage difficult to load.
Large images (such as those used in webpage banners) should be no more than 1 MB. Most other smaller images (like those included in a card item or within an article) can be 300 KB or less. We offer guidance on how to resize existing images across your Queen Mary web pages.
Before you upload your image, you also need to give it an appropriate name. Your browser will use the name you give an image on you computer, not the name you give an image on T4.
Use hyphens rather than spaces, and include descriptive key words (eg 'bancroft-building-lecture-theatre' rather than 'image005')
When you upload your image to T4, you need to add alternative text. You can do this in the ‘Description / Alt text’ field. Alternative text describes the appearance or function of an image on a page, and should be a literal description of what is in the image.
Different T4 content types will require different dimensions, with some content types (like header banners) needing you to have multiple sizes of the same image. You create these various sizes after uploading your image to the T4 media library using the variants function.
Creating these variants within the T4 media library, rather than before you upload them, will mean they are all saved in one place and easier to find.