Images enhance our webpage content, but they are one of the biggest contributors to a webpage’s size. Large images can slow down the page loading and, themselves may take a while to be visible. This guide talks you through identifying the pages where overly large images are hosted and how to remedy this.
The maximum size your images should be is as follows:
The easiest way to identify large image files is using Silktide, which is a platform you should be using regularly to monitor the accessibility of your webpages.
At least one person per team/department should have access to Silktide, and normally this is the person on your team who is T4 trained. If you need access to SilkTide or T4, please contact the Web Team — websupport@qmul.ac.uk.
On the Silktide homepage, select Tasks (top left-hand side), scroll down to 'Consider optimising images' and select that. On the drop-down menu scroll down to 'Queen Mary University of London'.
Where you need to navigate to on Silktide.
Then, navigate to the Content menu on the sidebar, and next to the images sub-section (also on the side-bar).
If you scroll down, you will see all the images across the pages you’re responsible for in order of size.
How the images will appear on Silktide.
On the left is the image in its original size (please ignore the optimized size, as that will often still be too large, and instead use the guidance at the top of this page).
Focus on the images whose size exceeds the maximum (stated above).
If you click on the search icon next to the original image it will bring up the page where the image appears.
The exact URL will appear in the top left-hand corner of the page.
Click on this and you’ll be taken to the page in a new tab.
Where the webpage URL is located.
Locate the image on the page and then CTRL + right click on it.
Select the ‘Copy image address’ option and then paste it into a new tab.
This URL will show you where the image is in the T4 media library.
You should have access to all the relevant media library folders, but please speak to the Web Team if this is not the case.
Now it’s time to resize the image.
To do this, go back to the SilkTide page where the images were listed.
Click on the download icon underneath the optimised image.
Save this image to your desktop.
Where you need to upload your image in the media library.
You can simply replace the existing image in the media library.
Select the current image and click on ‘Drop file here or click to choose’.
Upload your resized image and hit ‘Save’. This will then update all the places this image has been used across the website.