Skip navigation

Using Images

Please see the sections below for instructions, guidelines and specifications for using images on the university website.

Image Sizes

In order for the website to remain professional and performant, it is important that images are correctly sized and that file sizes aren't too large.

The correct specification for each type of image is listed below. 

All dimensions are in pixels and follow the convention width x height. 

It is important to ensure that images are no higher than 72dpi. Image file sizes should not exceed 150kb.

 

 

Horizontal pods

 

380x190

 

 
Side pods 255 x 190  
Homepage header/course detail/alumni large header

1920 x 580

150kb

 
All other headers

1920 x 420

150kb

 
News pod

275 x flexible height

50kb

 
Events pod

255 x 150

40kb

 
Image embedded within content 

350 x flexible height

60kb

 
Video embedded within content  770 x flexible height  
Course listing 190 x 190  
Course detail - career progression background 

1920 x 580

150kb

 
Course detail - alumni profile pod

380 x 190

50kb

 
Course detail - student quote pod 285 x 210   
Department list 375 x 125   
People list

255 x 255

50kb

 
Alumni profile - video background  1000 x 500  
Video gallery

255 x 150

40kb

 
Showcase images 600 x flexible height   
Case studies

190 x 190 

30kb

 

Resizing Images for Sitecore

All Sitecore images are stored in the Media Library. Before uploading an image to the Media Library, you need to resize the image. For information on image dimensions, see the previous section on Image Sizes.

For users who do not have access to Photoshop, a free alternative - PIXLR - is available online.

To resize and crop an image using PIXLR, follow the step by step instructions below, or watch this video (password= sitecorehelp).

The Digital team offer regular Digital Image Training sessions which are open to all Sitecore users.

  • Navigate to PIXLR and select the downward arrows
  • Select the left option, PIXLR Editor

  • Select Create New Image

  • Insert the requested dimensions 

  • Click OK and a canvas will appear which you will need to fit your image to

  • Select File, Open Image and select the image you would like to use from your documents, this will open another window

  • Click the image and use CTRL+A to select all, then CTRL+C to copy this. Select the original window and CTRL+V to paste in the photo

  • You can now close the second window, you don’t need to save this. You should now have the image pasted into the original window

  • You will now need to resize this. Select Edit > Free Transform

  • Hold Shift so that the image doesn’t lose its dimensions and fit it to the original template

  • When you are happy with the image, press Enter. Then go to File > Save. You can alter the quality of the image, which in turn will increase or reduce the file size.

Upload to the Media Library

To upload an image to the Sitecore Media Library, follow the steps below or watch this video (password= sitecorehelp).

  • Select Media Library from the main Sitecore Launchpad
  • Navigate to the folder Corporate Website > NEW SITECORE GALLERY and select the relevant folder for your image or create a new folder. 
  • Select Upload Files and choose the relevant image from your documents
  • To add the image to your desired webpage, switch back to content editor

Download an Image from the Sitecore Media Gallery

If you need to download an image from Sitecore, you need to locate it within the Media Library first. If you are unsure of where the image might be saved within the media library, you can check this depending on the image type.

  • If the image is 'in page', just right click it and select properties, the box will appear. You will see a file path in the box named 'image src'.
  • If the image is a Banner, Navigation Image or Profile Image; the file path will show above the image.
  • Switch to the Media Library and navigate the Content Tree according to the file paths shown.
  • Select download.

Adding an in page image

If you wish to insert an image into a page along with the text content, this can be done within the Rich Text Editor.

Within the Rich Text Editor, place your cursor where you would like your image to appear (all images are right oriented). Click the insert media button on the ribbon of the text editor; locate the image within the media library, select it and click insert.

Replace an Image within the Sitecore Media Library

If you would like to replace an image in Sitecore, locate the original image within the Media Library, click attach and upload the new image.

Audit Image Sizes on Webpages

Auditing image sizes on your web pages is a good way to ensure pages aren't hosting images which are too big. This can slow down the page loading time for users.

 You can follow the below steps to audit your web pages: 

  • Open the website using Chrome
  • Select the page you wish to audit
  • Press F12 to open the 'Developer Toolbar' 
  • Select Network > Image > Refresh the page > Use the arrow next to 'size' to order the images from low > high or high > low
  • Note: Images should be no larger than 150kb


Latest News and Features

More news

Back to top