How to optimise your images for the web

Sep 13

Putting all the pieces together for your website can be a daunting task.

Not only do you have a lengthy checklist (to write the copy, book a photographer, get your email marketing platform connected, blah blah blah) but you’ve also got to consider how your website is going to work from the user’s perspective.

The last thing you want to do is get through your to-do list and not realise that part of your website is in-fact deterring potential customers, rather than reeling them in. It might not be until 6 months down the line, even years, that you wonder why you’re not seeing the engagement or sales you had anticipated.

How the hell do you work out what’s gone wrong?! There are so many hidden pitfalls that might mean someone landing on your website isn’t converting into a paying customer (or at least giving you their email address before they leave).

Images are a key element of your website – and they can make the difference between a frustrated web user and a super-fan of your brand.

Why is it important to optimise any images on your website?

The answer is threefold.

For SEO (so you’re going to show up higher on search engine results pages)
For user experience/UX (so people are more likely to engage with your website)
For accessibility (so even visually impaired people can get value from your website)

So in this blog post I’m going to walk you through the two techniques you can use to:

⚡ Help your website rank better (which means your business is getting in front of more eyes, allowing you to reach a larger number of prospective customers)

⚡ Convert more strangers into paying customers or fans (whether you’re focused on increasing your revenue or growing a community, or both!)

⚡ Improve the usability of your site for anyone and everyone: including people who cannot see images. They often use screen readers instead, to help them understand what is in an image.

How do you optimise your website images?

There are two key techniques.

1. Label your images using alt text

Imagine I got someone to take some photos for my website of me meeting with a client in a coffee shop. When I download all of the images off my camera, they might have names like ‘DSC16900’. I need to rename an image to something like ‘Alice drinking coffee with a client in a meeting’.

When visually impaired website users scroll the net, they might use a screen reader if they can’t see the images on Google or a website. It’s a piece of technology attached or uploaded to their computer which reads out the text and the titles of images instead.

Which means the more descriptive you can be with each image label, the better.

*Top tip* Most website building platforms will give you an alt text box to write out your image labels when updating your website. I always design on Squarespace, as its image uploader is super easy to use and automatically creates an image library. Which is extra handy if you need to use the same image in multiple locations on your website. With Squarespace, you can also label images before you upload them – the title you give it pre-uploading will count as your alt text, which I think saves loads of time.

If you want to give Squarespace a go, click here to use my affiliate link. (Please and thank you.)

Your alt text is also a fab place to add keywords. So, if you wanted to rank on Google for a certain phrase or word, you’d reuse the same keyword on one specific website page to tell Google that the content is undeniably about that exact thing.

For example, I might want to show up in the results for anyone searching for ‘sales copy’, so I’d reuse the term ‘sales copy’ in the text on the page AND in the image titles.

So, let’s go back to my photoshoot.

I have a specific page where I want to rank for ‘sales copy’ and I’d like to use the coffee shop photo. Instead of simply calling the image ‘Alice drinking coffee with a client in a meeting’, I could add in the keywords and amend the image title/alt text to ‘Alice drinking coffee with a client in a meeting about sales copy’. This will reinforce the keywords you’ve used on that page, therefore improving your authority in search engines for these terms.

Psst. I also wrote an article all about where to put your keywords (other than just in image titles) which you can read here if you’re wanting to improve your SEO authority.

2. Adjusting your web photo size.

One HUGE reason why I see a ton of websites lose prospective buyers or clients (and a reason I’ve left many-a website myself) is because the website takes forever to load. The most common reason for this is that the image file sizes are huge.

The bigger the file size of your images, the more energy is needed to load your web page. And the more energy is needed, the longer it will take to load.

Especially if you’ve had a professional photographer take photos of you, your clients or your products, because they are likely to be fantastic quality. But that means the file sizes are likely to be pretty large. The last thing we want to do is use bad quality, low res images on our website.

In this day and age, people are consuming content at a considerable rate, so will get impatient if they have to wait more than 2 or 3 seconds for images or text to load. If people get bored waiting for your website to load, they will probably give up and go elsewhere.

According to Kissmetrics, 40% of customers will abandon a website altogether if it takes longer than 3 seconds and the average website loading time is 7 seconds.

Essentially, it doesn’t matter what you’ve said on your website, how fantastic your copy is, how well your services are described or how relatable you are. It doesn’t even matter if you’ve invented something that the world has never seen before.

Having a slow loading speed on your website means people are going to get bored easily. This could be a huge barrier that stops people from staying on your website, let alone engaging with your website.

The most common solution to slow loading speeds is minimising the size of images. You can compress your images whilst still keeping the quality of the photo you want on your website.

Best practice is to have individual image files no more than 500KB each. I usually use a programme called compressnow.com as it’s super quick and easy.

Not only does your website loading speed directly affect whether someone is going to stay on your site or not, but it also affects your positioning in search engine results.

So, when Google is deciding which website to put at the top of the search engine results page, your website’s loading speed is taken into account = the slower your website takes to load, the lower down on the search engine results page you’ll be.

*Think about it* do you ever really look past the first page of results when you’re Googling the answer to something online? Probably not very often, eh?! So, if you can make your website load faster, you’re more likely to be at the top of these results pages. Which means loading speed is really important if you want to get fresh eyes on your website.

Info overload?

Here are your take-away tips:

If you want to attract more customers, you need to get more eyes on your website
Then you need to keep them there.

To do this you need to optimise your images for: SEO, user experience and accessibility.

Which translates into two key points:

Label your images with alt-text
Adjust image file size

Focus on making the user experience great for everyone.

Make it easier, smoother and faster for people to navigate your website and you’ll have a better chance you have of converting them to paying customers.

Because the longer you can keep someone on your website, the more likely you are to build trust with them (and you’re more likely to come to mind first when they need to get their hands on the thing you do/sell).

So, although it IS super important to have images on your website, they aren’t going to help if you haven’t optimised them!

There’s a whole lot of things to think about when you’re designing your website. And I don’t know about you, but I find checklists a huuuge help: they keep me on track and accountable (because let’s be real, ticking off tasks off your list at the end of the day is super satisfying).