This information is for University staff and students who are producing and publishing images intended for use on the University of St Andrews website, social media channels, or other online sources.
All images uploaded to the University of St Andrews website must be between 72 dpi and 300 dpi.
Image sizes for quick reference
Image variant Image size Navbox 750 × 500 pixels Hero banner 1920 × 600 pixels Images used in main body of text 750 × 500 pixels
All photographs uploaded to content fields of the University of St Andrews website must adopt a 3:2 aspect ratio. This relates to images used in navigation boxes and main bodies of text.
Photographs should be St Andrews specific. Therefore, the digital communications team no longer supports or encourages the use of stock images across the University website. Stock images vary in consistency and are not representative of the St Andrews brand.
The University currently has an internal repository of approximately 8,000 images that represent many aspects of the University and town. These photographs, which are regularly updated, are taken by an in-house photographer and also by freelance photographers.
Images that include text and the University logo must use the PNG file type.
Photographs must use the JPEG file type.
When uploading images to the University website, they must first be optimised for web. This is to reduce the file size of images and download times for users.
For Windows users, we recommend using RIOT for image optimisation.
For Mac users, we recommend using ImageOptim for image optimisation.
HTML image alt attribute
altattribute must be included for all images. In the event that a user cannot view the image—perhaps because there is a problem with the image source or the page is being viewed over a slow connection, or because the user is visually impaired and is visiting the page using a screen reader—the
altattribute provides alternative content that will be displayed in place of the image.
altattribute must clearly explain what the image contains. If the image contains information such as a date or time, this should also be included.
Where an image requires a caption, the text must be displayed below the image using the
figcaptionHTML element. Captions must be kept short.