Image Guidelines

 Accessibility

All images are uploaded to the Media Library in Terminalfour. When adding an image to the Media Library  the ‘description’ field is used to add alt text (alternative text) for images. Alt text is used to provide a description of an image. According to the W3C Web Accessibility Initiative “The alt text should be the most concise description possible of the image’s purpose.”

For more information on writing alt text for images see the tips sections on the W3C website:

(opens in a new window)https://www.w3.org/WAI/tutorials/images/tips/

Text on images should be avoided as this cannot be read by a screen reader.

UCD Image Catalogue

These images are free to download, publish or distribute for use connected with University College Dublin.

(opens in a new window)https://ucd.canto.global/v/UCDImages/landing

Design Library Image Sizes

Homepage Banner Image

Dimensions 1920px x 800px

Homepage Banner Video

For a video the format is mp4, standard ratio of 1920 x 1080 will work (you will lose a bit of the bottom of the screen on the video). Video works best when it's compressed as much as possible to a small file size (under 5MB is ideal), no audio and 10 to 15 seconds usually works best for a banner video.

Home Slider with Video

Dimensions 1920px x 1080px

Home Slider with Image

Dimensions 1920px x 800px

Spotlights & News Headlines

Dimensions 450px x 280px

News Item

Dimensions 930px x 500px

Campaign Banner

Dimensions 1920px x 721px

Staff Profile

Dimensions 300px x 300px

Inside Banner

Dimensions 1920px x 478px

Inside Banner Video

The format is mp4, standard ratio of 1920 x 1080 will work (you will lose a significant part of the top and bottom of the screen on the video, so it's best working with a video where the focal point is vertically centred). Video works best when it's compressed as much as possible to a small file size (under 5MB is ideal), no audio and 10 to 15 seconds usually works best for a banner video.

Main Content

930px x 500px

An optimal size for a landscape image to fit the width of the component.

Panel with Image & Text

690px x 500px

Footer Images

Optimal Dimensions of 150px x 150px

To allow for variation the width can vary, height will be rendered at 75px

Testimonial Large

1920px x 721px

Testimonial Small

200px x 200px

Image Gallery / Video Gallery

Video Thumbnail 

370px x 263px

Image Thumbnail

370px x 370px

Grid Images

370px x 370px