Image standards
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.
Technical specifications
-
Resolution
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 Aspect ratio
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.
Requests for images may be made through the University's online photo gallery or by contacting Print and Design (printanddesign@st-andrews.ac.uk).
-
File types
Images that include text and the University logo must use the PNG file type.
Photographs must use the JPEG file type.
Image optimisation
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 JPEG images, it is recommended to use 30% quality.
HTML image alt attribute
An
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—thealtattribute provides alternative content that will be displayed in place of the image.The
altattribute must clearly explain what the image contains. If the image contains information such as a date or time, this should also be included.Captions
Where an image requires a caption, the text must be displayed below the image using the
figcaptionHTML element. Captions must be kept short.