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.

How to add an image to your site.

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.

Naming images

It's vital that image file names are descriptive to allow you to search for that image within the media library in the future.

Avoid using generic file names such as 1.png or Screenshot(2).jpg

Image sizes

Here is a handy breakdown of the sizes we recommend for the various content types on the UL website.

Copy and save these sizes for future reference.

On this page

Naming images

Image sizes

Stock images

Images with text

Alternative (Alt) text

Learn how to crop images in Canva

Tutorial

Banners

1440x619 pixels or ratio 142:61

Banner example

Profile images

Ensure all profile photos on a single page are in the same ratio, ideally 5:7 or portrait-orientated

profile image example

News images

1168 x 876 pixels or ratio 4:3
      
  

Example of news image

Events images

378 x 295 pixels or ratio 19:15
      
  

Example of event image size

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

featured tile
Featured tile
featured tile (card)
Featured tile (card)

Stock images

As tempting as it might be to fill your web pages with stock imagery, we advise against it as they are not consistent with the look and feel of the UL brand. Instead, check out the library of original UL images that are freely available on SharePoint.
      
  

" "
An example of stock imagery

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. 
      
  

Open Day
This image would work well on social media, but is inaccessible on a webpage.

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: “ “ 

More information on alt text.