Optimising large images is one of the easiest ways to speed up a website.
If you sell chairs, you show pictures of chairs on your website. It’s not rocket science. Everyone has images on their websites.
But how can you make your images better?
We have audited hundreds of websites over the years. In almost every case, unoptimised imagery has been the main culprit for undesirable SEO and accessibility outcomes.
In this article, we’re going to look at three quick and simple ways to improve image performance on your website:
When thinking about image optimisation as an SEO technique, it could be classed as On Page or Technical SEO.
Some argue that image optimisation is the responsibility of whoever is putting the content together, as the images are directly correlated to a particular piece of content. Others say it’s the responsibility of whoever runs the website infrastructure, to ensure tools are in place to make this stuff either automatic or at least very simple.
It doesn’t really matter what bucket it falls into, so stop arguing about it. Just make sure it gets done.
Let’s have a look at some of the ways we can help our images do their best for our websites…
Make sure your images aren’t too big
First, make sure your image file sizes are optimised.
A photo taken with your phone or camera is pretty big. It will have large dimensions (width and height), as well as be a large file size (likely to be 5MB or more).
If you go down the stock photography route, you’ll be in a similar boat as most stock imagery is enormous at initial download.
Let’s imagine you add three unoptimised images to your website that are 5MB each. Your visitors will need to download that 15MB, as well as the scripts to run the page just to see your content.
That’s a terrible user experience.
The common terminology for websites with a large number of assets (scripts and images) is to be heavy. Heavy pages slow down your website for your users, and also make it harder to crawl for search engines such as Google and Bing. None of that is good for anyone.
Using simple and free online tools, we can quickly turn a batch of enormous and heavy images into something that both your website visitors and search engines will love.
Image optimisation tools
If you don’t have easy access to tools like Photoshop or Sketch, then don’t worry – there are many free or low-cost tools you can use to keep your images in good shape.
These are a few that we’ve used in the past and have had great success with:
Some of those tools also integrate with popular website software, such as WordPress and Shopify, which is excellent as the compression can then happen automatically at upload, as opposed to you having to compress each image individually.
Give your images meaningful names
When you pull an image from your camera or phone, it’s going to have a non-optimised name, like P2522.jpg or similar.
Likewise, if you use stock photography the filename will generally not be much good for use on your site either.
The best name to give an image is to call it what it is. This helps search engines understand what the image is, and helps give authority to the surrounding content.
If we’re writing an article on how to cook poached eggs, then a picture of poached eggs should probably be called poached-eggs.jpg.
For multiple images of the same thing, such as a product page for a shirt, do not call the images shirt-1.jpg, shirt-2.jpg, shirt-3.jpg etc. Call them blue-bonds-t-shirt-front-view.jpg, blue-bonds-t-shirt-rear-view.jpg, blue-bonds-t-shirt-side-view.jpg.
Again, it’s not rocket science, but it is important. All of these very small optimisations can add up to a lot on a big website.
Use alt-text correctly
Alt-text is one of the most misunderstood parts of website imagery.
To be clear, alt-text does not exist for the purposes of SEO. Alt-text exists as the alternative to show (or speak) if the image cannot be seen. Alt-text is one of the many accessibility techniques that has a positive impact on your SEO.
There are a number of reasons why an image may not be able to be seen, therefore utilising the alt-text:
Accessibility
This is the most important reason why you need alt-text.
People with little or no vision can use a screen reader to read out web pages to them. Some people also utilise braille terminals to transform the visual information on a web page to a braille reader.
If a screen reader is reading out a webpage, it has no idea what the image is, unless we specify it within the code.
Similarly to our image name, our alt-text should specify what the image is. Some examples might by “Overhead view of the Sydney Opera House” or “a man sitting on a beach looking happy with a drink in his hand”.
You just pictured those things in your head without actually seeing the images, didn’t you? That’s the point of alt-text.
With our alt-text in play, the screen reader will say something along the lines of “picture of a man sitting on a beach looking happy with a drink in his hand”, as opposed to just saying “image”, reading the file name or saying nothing at all.
Now that a screen reader can actually tell your user what your images are of, I’m sure you’ll agree they’ll be far more likely to enjoy and revisit your site.
Slow connection
If the server that’s serving your website becomes overloaded, it may not send all the image data correctly, so images may not show.
Likewise, if the user is on a slow internet connection, the browser may not be able to load all of the images on your site.
What happens then? The alt-text is shown.
Have you ever been to a website and seen this icon?
This means the image hasn’t been able to load, and there is no alt-text provided. As a user, you have very little idea what this image is supposed to be, so you’re not getting as much context to the surrounding text as you normally would.
Again, this is bad user experience, and therefore bad for your SEO.
Alternatively, if the image does have alt-text, then this is what you would see:
Again I’m sure you’ll agree that this is a far better user experience.
Every website builder will give you an easy option to add alt-text. Always fill this in.
We have a more extensive article on alt-text and it’s implications on the SEO and accessibility of your website if you want to read a bit more on this topic.
Where to start with optimising website images
Having large images, not naming them well and not using alt-text correctly leads to a poor user experience, which as we’ve discussed, has a negative impact on your SEO.
Whether you’re optimising your own website, working on a client site in digital or planning on doing some website building as a side-hustle, these skills are a must to keep your website content fast for your users and to keep search engines happy.
The best place to start is to look at your website and see where you might be falling down. If you’d like a comprehensive website audit, then get in touch and we can tell you every single image on your site that needs optimisation.
From this point forward though, make yourself a checklist for whenever you’re publishing new content.
- Only upload compressed images
- Make sure the image file names make sense
- Write appropriate and compelling alt-text
Want more SEO info? Sign up to our newsletter, or buy our brand new SEO for Australian Small Business eBook.
You can even download the first few chapters for free if you want to take for a test drive!
Now a digital veteran, Sam Hemphill initially trained as a drummer and high school teacher and spent 10 years as a touring musician and tour manager.
During that time, he...