Site icon Newt Labs

How To Optimise Your Images To Boost Your Website Traffic

Andrew Cock-Starkey
How To Optimise Your Images To Boost Your Website Traffic

Imagine you have a big box in your business/office/shop. Something like this – but, say, 10ft high.

This box is taking up loads of space. Valuable space and yet it’s contributing very little to your bottom line.

You’d start asking questions: What is this? Whose is it? Why is it here?

What if I told you that you’re probably doing that with your website, right now? You may have even done it again, today.

You’d be rightly appalled. And yet, there are thousands of websites that do this with the images on their website.

I’m going to walk you through the steps to optimise your images for SEO (search engine optimisation) so they really work for you.

Table of Contents

Make your images pull their weight

Your lovingly crafted and carefully researched content is doing its utmost to bring you more business but the images are holding it back.

Time they chipped in.

You did do careful keyword research right? E.g. do your customers search for “cheap widgets” or “best widgets” etc.? Good. Don’t throw that away once you’ve written the content.

If you haven’t done your keyword research learn how to skyrocket your traffic with LSI keywords.

The starting point for making your images work harder for you is using those keywords in your images too. You can put them in the following:

I’m assuming you’ve already done a cracking job with your copy. It’s important not to over-egg it.

Search engines are switched on to what’s known as ‘keyword stuffing’ – so if you jam your target keyword into your URL, page title, headings, copy and into all the images too that’s going to ring alarm bells – penalty-inducing, ranking decreasing alarm bells.

However, you can use synonyms and related words that you perhaps found hard to fit naturally into your copy. Your image file fields can be a great repository for those words.

The Foundations: What does this look like?

Let’s look at that image I used for my ‘useless box’ analogy.

  Bad OK Great
File name Img2234.jpg useless-box.jpg useless-box-black-and-white-photo.jpg
Title Blank Box photo Photo of a useless box
Alt text Blank Black and white photo of a box A black and white photo of box-shaped device on a wooden floor – used to illustrate a point about useless boxes taking up space
Description Blank Black and white photo of a box A black and white photo of box-shaped device, with four empty sockets on a wooden floor – used to illustrate a point about useless boxes taking up space
Caption Blank Image credit: Pawel Durczok Box clever: Are images on your website like this – useless? | Image credit: Pawel Durczok

We can all agree the ‘Bad’ column isn’t where we want to be.

I get it. You’re in a rush. It’s taken you ages to write that blog post – do you have to do all this image stuff too?

Can you afford not to? You’re letting your content down if you don’t.

Why go to all that trouble of making a proverbial chocolate cake, just to sprinkle a few blobs of mustard on the top?

Lots of sites make it as far as the ‘OK’ column. They at least don’t leave the alt-text blank – they copy and paste it into the Description and Caption field too though, to save time.

They’re keen to give credit where it’s due and mention the photographer whose rights-free image they’ve used. Not bad.

But not ‘Great’. Let’s make it great.

File names

To go that extra step give some real thought to your images. Don’t be shy about long file names – in most cases no-one but you and (crucially) the search engines will see them.

Make them descriptive. Consider those keywords you really wanted to get into your copy but couldn’t. Say you were writing about trainers/sneakers. Saying “trainers/sneakers” all the time is clunky and bordering on unreadable.

But you could easily have trainers-sneakers.jpg as an image in the piece. Or better yet: adidas-dragon-retro-red-size-10-trainers-sneakers.jpg.

Title

This is similar to the file name – think keywords and be creative here, though a shade more careful.

Depending on a users’ browser and settings they may see this title displayed if they hover their pointer over the picture – so no essay-length image titles!

Alt-text

Alt-text is designed for screen-readers – for those people that cannot see images. Usually this is access related, they may be blind or partially sighted etc. but they may also just be on a lousy/expensive internet connection.

Screen-readers for the partially sighted will read out, word for word, your alt-text to tell the user what there’s an image of. So make it descriptive and accurate. This is not the place for your sales pitch.

However, you can legitimately use it to add a few more keywords as you did with the file name.

This video gives you a flavour of what this is like for a partially sighted reader:

Done badly, it’s painful. Done well, it can really help your visitors – partially and fully sighted.

Description

The Description field is one that’s quite different in WordPress and can vary depending on how your site is set up and which template you use.

This guide to images on WordPress probably explains it better than I could.

In short, you can be a bit more descriptive and wordy here than in the alt-text – let your inner poet flow!

Caption

Again, this is an optional one. You may not want to put a caption on your image but if you do, make it helpful, informative and related to your content and the words you want to target.

Do not just make it a copy and paste of the alt-text.

How often do you load a blog post on your phone and quickly flick to the end – to see how long it is and if it’s worthy of your attention?

Captions are for those people. Grab their attention as they flick past.

File size

This one is a personal bugbear.

I’ve lost count of the number of sites I’ve found with images uploaded at one size then jammed into the site at a tenth of the size. Why?

Unless you’re uploading product shots and your customers are going to want to zoom in on it – it’s pointless.

Worse, it’s hurting your traffic.

You may have heard (a couple of billion times) that mobile is the future of the internet. More and more people surf, shop, read and buy on their phones.

We’ve all been there – on a ropey 3G connection, waiting for a page to download… waiting some more… getting frustrated and giving up on the whole thing.

Every time you shove huge images into your site you’re subjecting your customers to that.

It happens a lot. Even in places you may not expect. I recently saw a site that had uploaded the Facebook logo at 1000×1000 pixels, with a file size of around 150k. They were then jamming it into pages at 30×30 pixels (nearly 99% smaller).

Why? By doing that, every time a customer (or potential customer) visits that page, their browser has to download that huge image and then squish it into a tiny, tiny box.

Here’s a picture of the Newt Labs boss, Steven. It’s 90 pixels by 90 pixels. That’s the size of the original image (in this case from Gravatar) and that’s the size it is when it appears on the site. Simple.

If you’re using one of the many WordPress image compressing plug-ins – make sure it works. But also don’t let it make you lazy. You don’t need to upload that image directly from your iPhone at around 4,000 pixels across. Stop it.

Rant over.

P.S. In this case, consider compressing large images on your site to make your pages load faster.

Srcset

If you have a responsive site you may be thinking “but how do I know what the right size is?” – and you’d be right. Users on a tablet or on a phone may well see the same image at different sizes.

This is where the srcset code comes in. This deserves an article on its own – so here’s one WordPress prepared earlier, explaining it and how to use it.

In short, using srcset you can make your responsive site (again, will depend on your site/template) show different images to different users, depending on their device.

This isn’t just making the same image smaller/bigger either. You can use a different image for each different screen width.

Your lovingly crafted infographic may be utterly illegible on a tiny iPhone5 screen – but you could upload an alternative image, with just the salient points in a larger font, just for those users.

This means more work for you – you have to consider the main screen sizes your audience use. If you sell office hardware and 99% of your customers shop on large desktop computers, perhaps this isn’t for you.

But if your audience browse your site on a range of different devices (check in your site analytics) this can make your site not only faster for them (why make them load a huge image they can’t see/read?) but also give a better UX (user experience).

Think of it as a barman knowing your favourite drink as you walk in to the pub – even if you’ve never been to that pub before. Cool huh?

Again don’t let this method make you take shortcuts. Find the absolute biggest file size your customers might need for that device and upload it at that size.

Going beyond the basics

OK, once you do all that for every image on your site (and I mean every image – including the logos, even the social media icons you have in your footer – all of them) you have the foundations set.

Everyone should be doing this so how are you going to elevate your site above all the rest?

Schema and rich text

Anyone that reads the Optimisey blog or follows me on Twitter will know I’m a big fan of schema.

If you’re not familiar with schema they’re a way to mark-up content on your site and give a really clear signal to search engines about what the content is.

Got a page about a product? There’s a schema for that. Which part is the price? Which part is the colour? What is it similar to? All in the schema.

There’s a schema for almost everything and they’re adding new ones all the time. Just recently they added a new one specifically for public toilets (When is it open? Where is it? Is it inside a shop or other place?).

No surprise that there’s a schema for images. Use it. If you’re not sure how, talk to your developers. If they’re not sure how, get better developers.

Google are always working on ways to make search more useful. They recently added tags on Image Search marking up when images it has indexed are from a Product or Recipe.

Think about it from a user’s point of view. You Google “Victoria sponge” to see if your creation looks like it should – and you can instantly see which image is from a recipe – which may be handy, if you’re planning more baking.

Similarly, if you’re shopping for “red adidas trainers” which is more useful – a page of blue links and Google AdWords ads? Or a page filled with images, some indicating that they’re from a product page so you could buy them right on that page?

This will vary by your products (assuming you have any at all) but if you have a visual product like clothing, bikes, accessories, food, phones – anything where what it looks like plays a big role in people’s purchasing decision – you should be factoring this into your site design and code.

‘SimilarTo’

You can use schema to tell search engines what your product(s) or service(s) are similar to.

There are a whole host of ways to mark up your images (and your content and pages in general) using schema:

This can be a great way to connect yourself and your products to a more famous product or alternative (assuming that they mark-up their products!).

If you sell iPhone accessories the chances of you outranking Apple for most keyword searches around their products is pretty slim.

But if you wanted to grab a portion of the traffic for people looking for cheap/affordable alternatives to their pricey accessories, this is a really smart way to get in the game.

As with many things SEO, reading Google’s advice on this is always a good idea.

As they say themselves, this is still quite a new addition and only on limited platforms – for now. Get ahead of the game. This is coming to all Google search properties soon.

Be careful though. Marking your old second-hand 1990s Nokia as ‘isSimilarTo’ the new iPhoneX is likely to have you falling foul of a spammy mark-up penalty from Google.

Use it smartly and honestly. Think about your customers – is relating your product/service to that famous alternative useful to them? Or just useful to you? If it’s just the latter – don’t do it.

Manual penalties on your site are not a place you want to go. *shudder*

Structured data

Schema is a form of structured data.

Marking up your content (especially your images) with it is a good idea for all the reason I’ve outlined above – but it may also help you even more in the future.

Google (and other search engines/tools like Amazon, Pinterest and ebay) are thinking about images as a method of search.

Think Hollywood movies – where you take a picture of something and your device can instantly find it for you to buy. You could literally buy the shirt on someone else’s back.

Google are getting really good at recognising what pictures are of but structured data will really help. With it they’ll work out that your “Brown Hermes Birkin handbag” is similar to someone else’s “Beige Hermes Birkin handbag”.

Faster, better more

Making your site faster should always be on your to do list – and not just around images.

Jon Henshaw (once of Raven Tools who are now owned by Tap Clicks) has made it a bit of a personal crusade to help people make faster sites.

https://makefastsites.com/ is a site he’s set-up with all sorts of tools, tips and advice to help you make your site faster.

This includes more advice on optimising images which I highly recommend if you really want to step-up your image optimising game.

It includes lots of advice, including some WordPress-specific stuff on image optimisers and CDNs (Content Delivery Networks) and HTTP/2 – a major re-versioning of the HTTP (hyper text transfer protocol) the building blocks of the web.

It also talks about which file type to use for which kind of image. PNG, SVG or JPG? Each will have an impact on the file size and quality of the image. Read Jon’s guide on when to use which.

But I digress…

Images can bring you links

Do you hate stock photography? Do you take or make your own images for your site? Great!

Do you know if anyone else has ripped them off, probably without your permission, to use in their own site?

Want a quick way to find out?

  1. Do a Google site search for your site – go to Google and literally type: site:yourwebsite.com including the word site and the colon, where “yourwebsite.com” is… well… your website address
  2. Click the “Images” tab at the top of the results page.

You’re now looking at a list of all the images Google has indexed on your site.

  1. Pick an image from your site (one you think is likely to have been pinched) – click and drag the image into the search box.

Google will now search the web for images like that.

It will bring back a load of images that are “visually similar” but scroll down and you will “Pages that include matching images”.

Some may be your pages, some may not – these are your images being used… not on your site.

After you’ve got over the fury of someone nicking your stuff – you can turn this to your advantage.

I’m an optimist. I assume most people aren’t evil. They didn’t mean to steal your image. They probably thought it would be OK/you wouldn’t notice. Now you have noticed you’ve got two options:

  1. Vent fire and fury – insist they take it down and threaten them with lawyers etc.

If you’re a photographer or someone who makes their living by creating images (a designer etc.) you may want to pursue this route.

However, another option is:

  1. Contact them – say you spotted they used your image. Say you don’t mind if they credit you and link back to the original.

Now, this may depend on the site that’s pinched your image. If it’s an entirely unrelated site (you’re a plumber in Cambridge they’re a mobile disco in Kentucky) a link from their site to yours may not be all that handy.

However, if they’re in the same ballpark as you (and this can be geographical as well as topical) then a link from them to your site may be great.

They’ll probably be grateful you’re not going the option 1 route (lawyers and brimstone) and will likely pop in a link to your site, no problem.

Boom. You just got another relevant link to your site, which is good for your rankings.

Now your images are bringing you links, not just extra business and not just a bit of decoration on your blog post.

Image site map

If you use a WordPress plug-in like Yoast it can help you take care of this.

Even if you do you should understand what it’s doing and why.

A sitemap is a guide for search engines and crawlers. These crawlers pore over your site finding all the content and telling its indexing counterparts to index or ignore that content.

Search engines love sitemaps. The internet is a big place, so anything which helps guide them through content and understand how it’s all connected to each other goes down well.

A sitemap for the content on your site is strongly recommended, especially for SEO.

To make sure your images are likely to contribute to increasing your traffic from search add a sitemap for your images too.

If you’re unsure if you have images in your sitemap, you can check this in Google Search Console.

What!? You don’t have Google Search Console set-up? Chastise yourself severely and go and get Google Search Console set-up for your site, quick.

When you do, the “Sitemaps” section in the “Crawl” menu will show you something a little like this:

Google themselves say this so follow their guidelines and add your images, captions and titles to your sitemaps.

Summary

I’ve covered a lot of ground here but the crux is: think about the images on your website as much as you think about the rest of the content.

They’re important and not just from an aesthetic point of view. Done right, they can really make a difference to your website’s traffic.

Remember:

Exit mobile version