Image Guidelines
A resource for creating images for Design Library websites.
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
Large image dimensions 1920px x 800px
Mobile image dimensions 767px x 550px
The cropping of the image will vary depending on the user's screen size.
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
Site Contact Component
University College Dublin, Belfield, Dublin 4, Ireland. T: +353 1 716 7777 | E: sample.name@ucd.ie |This component appears on every page of the site and is located in the section 'contactfooter'. Fields will only appear if populated with content. The 'contactfooter' section also contains separate components for each social media item.