Image Styles on the Departmental Website
The image sizes/styles listed below are available to use when uploading content images. There are two main types:
- Scale & crop - The image will be resized to exactly the size specified, and automatically cropped if it is too tall or too wide.
- Scale - The image will be resized to the size specified or less, retaining the original aspect ratio.
If you require a different size for a one-off use, please resize the image before uploading it (e.g. using GIMP, which is installed on the department machines) and then select "Original". If you think we would benefit from adding an additional standard size/style, please contact IT support.
Some styles also have a descriptive name - these were used until June 2023, when we switched to listing the sizes.
Some scale & crop styles are marked "focal point" - these styles support off-centre cropping. Unfortunately, that functionality is not currently available in the content editor, only in banner images and news articles.
Original
The image will not be resized by the server. However, it may be resized by the browser, to fit in the space available.
Warning: Large images take longer to download, especially on slower mobile networks, so you should not use "Original" for very large photos.
For example, this image is 3200×2136 pixels, but the browser will resize it to around 785×524 pixels. This means every user has to download a 1.1 MB large image, instead of a 116 kB resized image - making it around 10x slower to load.
Scale & crop – 16×16 (square) – Icon
This is rarely used.
Scale & crop – 100×100 (square, focal point) – Thumbnail
Scale & crop – 150×150 (square, focal point) – Profile small
Scale & crop – 220×165 (4:3)
Scale & crop – 258×145 (16:9, focal point) – Media landscape image, small
Scale & crop – 258×258 (square, focal point) – Media image, square
Scale & crop – 258×300 (3:4, focal point) – Media portrait image, small
Scale & crop – 397×223 (16:9, focal point) – Media landscape image, medium
Scale & crop – 397×530 (3:4, focal point) – Media portrait image, large
Scale & crop – 480×360 (4:3)
Scale & crop – 536×300 (16:9, focal point) – Media landscape image, large
Scale & crop – 1140×250 (focal point) – Banner image
This is used in the page header. (It is wider than this column, so is scaled down here - click to expand it.)
Scale – height 100
Scale – max. 480×360
Scale – width 397
This is about half the width of the content area of a 2-column page (with a left menu).
Scale – width 480
This is about half the width of a 1-column page (no left menu).
Scale – width 785
This matches the width of the content in a standard 2-column page.
