Author: Jack Telford
For most website owners, image optimisation will be the easiest way to improve your site speed, but approaching it can be a little daunting if you’re not up to date with the key processes behind it. Here, I’ll walk you through the concepts you need to understand around image optimisation, as well as how to prioritise pages and the tools that make it easy.
What is Image Speed Optimisation?
At its simplest, image speed optimisation means making images smaller in some way, so that they take less time to load for users and search engine crawlers. A fast site will rank better, have less users drop off and provide an all round better experience, so image speed optimisation is well worth undertaking if you want to improve your SEO and wider site performance.
Understanding Compression & Resizing
The two easiest ways to optimise images is to either compress them or resize them. In order to understand these concepts, you have to understand first the main attributes of images which determine their speed on site. Images have both dimensions, which are their physical size (measured in pixels), and file sizes. File sizes are not directly related to the physical size of an image, instead, these are a measure of their quality. They’re measured in bytes (KB, MB etc.)
Compressing an image means keeping the dimensions the same, but reducing the file size (basically lowering the quality) whereas resizing is exactly that, making them smaller. Both of these processes ultimately reduce the file size of an image, meaning that they are easier to load for search engines and users. You compress images that are too heavy, and resize images that are too large.
Choosing Images to Optimise
To show impact fast, you need to start with images which are having the biggest negative effect on your site and its users. This generally means identifying:
- those that are the most unnecessarily large in file size
- those found on the highest number of pages
- those that are on the most important pages of your website
I recommend you start by crawling your site in Screaming Frog and exporting all of the images from the “images” tab at the top of a crawl. Screaming Frog will give you two useful metrics – file size and inlinks. Images with a large file size and a high number of inlinks are those you want to tackle first, as they are found on numerous pages – so are likely to affect a lot of users – and are taking a lot of resource to be loaded. One caveat here is that big isn’t always bad. Always think about how large an image needs to be alongside how large it actually is when prioritising.
How to Compress Images
Now you know the images which need optimising, you can compress and re-upload them on your site. TinyJPG, allows you to compress several images at once and is very simple to use. Despite the name you can compress either .jpg or .png images on here. Do check when you export them though that they are still of the quality you require on the biggest screen your users are likely to use to browse your site.
How to Resize Images
However, compressing images is just one element of optimisation to consider. Resizing can have just as many benefits, and is really easy to do as well. I use the Cloudinary web speed tool for this. Paste web page URLs and the tool will pull out all images featured on the page, as well as recommending changes to image size, format, quality and encoding parameters.
The main thing we want to check here is whether the image is uploaded on site at the same size as it’s shown to users. One common mistake is to upload a huge image on site, which users only ever see very small as the browser scales them down, slowing the page down unnecessarily. The tool will show the size of the actual image, then the size that its displayed on-site on the biggest screen it’s likely to be. When there is a discrepancy, resizing is your best course of action.
Compress and Resize Online
The best thing about this tool is that you can download an optimised image straight from the results screen. You will be given the option of either i) exporting an optimised image in the same format that it’s currently on site or ii) exporting the image in another format. You can look at which is smaller in file size and suits your needs better, then upload to your site. Compression and resizing in one go – easy.
What I’ve shared in this post is far from the whole picture of site speed image optimisation, but it does cover off the quickest, easiest and most effective ways to make a start. There are a whole range of other things you can do – from uploading different images for different devices, to experimenting with different formats and content delivery networks – but from my experience, the easiest gains can be made with the two simple fixes above (as well as just getting rid of images you don’t need – not sure I need to explain that one).
I hope you found this an interesting (or at least a useful!) read. Let me know in the comments below if you have any queries. Or if you’re looking for more reading, take a look through our core categories below.
It’s the foundation that all SEO is built on, and can be a pretty useful extension too. Read our latest & greatest technical SEO articles here.
If you want to diversify the entry points to your site, you’ll need to create and maintain great content. Check out our tips & techniques.
Catch up on strategy advice. However advanced your tactics are, without strategy your SEO won’t get you where you need to go.
Behind the Site
I’m Jack Telford, an Owned Strategy Director at Publicis Media. I’ve been in the SEO industry for the last 6 years and love the collaborative nature of the space. This site is my little contribution to the community.
Got any Good Ideas?
Always looking for new contributors to the site – and for feedback too. Feel free to get in touch if you’re interested in writing or have anything to share.
London, SW4 (or I will be again after lockdown)
About 100 SEO Ideas
The place to explore quick, easily digestible SEO and wider marketing tips and techniques. Sharing knowledge from professionals across the field, we aim to help each other achieve greater success.