Images are one of the most effective ways of providing information, but it is important to ensure that your message isn't getting lost in translation.
Below are some pointers that will help when adding an image to your content on the UL website.
Where does it belong?
Images are an extremely effective way of communicating with your audience online. However, we advise against using images for unnecessary decoration.
Before choosing an image, ask yourself: What does this add to my content?
Your image should help tell the story and give your audience a better insight into the content.
Learn how to crop images in Canva
Featured tiles
Sizes vary depending on the number of tiles in one row.
A good rule of thumb is to use good quality landscape-orientated images for default and card tiles and portrait-orientated images for long tiles.
How to use featured tiles
Images with text
Avoid using images with text. This is because they are not accessible by people who are visually impaired and use a screen reader or those with reading difficulties.
The Web Content Accessibility Guidelines (WCAG) recommend avoiding using images of text if you expect the text to be read by the user unless it’s necessary, such as in a logo or brand name, in which case the alternative text should be the same as the text in the image.
Images on the website should be kept simple, such as images of the campus or students, with any text entered as normal text - exactly like the text you're reading now.
Images with text in them are often difficult to read for mobile users, and most users of UL.ie access the site on mobile.
Alternative (Alt) text
All images must have alternative text, as those who cannot see images rely on it to describe what's on display.
Any information in an image should be in the text alternative.
When writing alt-text, imagine how you would describe what is happening in the photo to someone who can’t see it. How does it contribute to your content? Specify this in your alt-text in less than 125 words.
There is no need to include the words “ a picture of” in your alt text. If your image is purely decorative, ie, a banner image, simply add the following alt-text: “ “