Optimising images for the web
When you open any web page, your device downloads all assets that populate that page. Images on web pages are also downloaded and cached to your browser’s memory. Depending on the speed of your download connection, this may appear instantaneous, but you may notice on some occasions that images can take a while to download when you first view them.
This is due to the file size of the image being too large. The image has not been optimised for the web.
Image optimisation allows you to upload high-quality images at the smallest possible file size. This means that image loading times are much quicker when you optimise your image for the web. This particularly benefits users with very slow internet download speeds. All users should have the same advantages when browsing the University website.
You need to make sure your images are quick to load because as soon as page load times take more than one second, the probability of users leaving your site increases.
There are only two simple steps to carry out when optimising an image for a web page.
Step one: Resize the image to the right resolution
Most high-resolution photographs are very large in resolution when first captured. This is great for viewing on the device used to capture it or when sharing to publishers for print purposes.
My iPhone 11 takes photos as JPEG files at dimensions of 4032 × 3024px. On the University website, the majority of images have dimensions of 750 × 500px.
Before you upload an image to the University website, you must resize it. This can be done in any image editor tool on a computer. Most are pre-installed like Microsoft Paint on Windows.
For resizing photos, if you don’t already have Adobe Photoshop, I’d recommend using one of these free image manipulation applications:
- Canva image editor (once you’re finished editing, you’ll need to download rather than save the image)
- GIMP (similar to Adobe Photoshop).
Step two: Compress the image file size
On average, photos taken from my iPhone 11 can be 6 MB. On the University website, we aim for no image to have a file size larger than 500 KB.
Even when an image has been resized to 750 × 500px, file sizes can be close to 1 MB.
After you have resized your image to the correct resolution, import it into one of these image optimiser applications that are free to download:
Congratulations, your image is now ready to be uploaded to a website.
But, what about social media?
You don’t need to resize or compress images when uploading to social media platforms. They already run hardcore compression on all images uploaded by default.
So, don’t share photographs over social media with colleagues, friends, and family because the images they receive will be highly compressed and lose all metadata. Instead, share them via email at the original file size.