Ultimate Guide to Image Optimisation

Ultimate Guide to Image Optimisation

Allan Gaddi | May 03, 2018

When most people think about optimising images, people will tell you about the need to make the file size small, but that is only one step when it comes to really optimising an image for your website. In this article we are going to share the tips and tricks you need to get going.

Why you need to conduct image optimisation

There’s a huge separate subgroup for image search
Did you know that Google alone performs around 2 trillion searches per year? What does that mean? It means that photos are not just eye candy anymore. They are proven traffic generators. They have the potential to grow your site’s visits exponentially. They now have a function, an important job to do.

Images are shown in SERPs
Search Engine Results Pages (SERPs) sometimes include an image carousel for certain searches. That’s extra real estate that people are spending thousands of dollars to get on. A few minutes of optimisation is definitely worth the effort. Industry leaders call this position 0. Extra features that doesn’t count towards the top 10 results. Images are called an Image Pack. Moz claims that 12.5% of all search results include an image pack. That’s a significant amount of potential visitors.

Users demand fast sites
As an seo specialist it pains me to see test results where a page is 2.6MB and images comprise 2.3MB of that. It also reminds me of why web designers and SEO practitioners are always at odds. In my defense, I follow the “form follows function” mantra. In reality, there should be a balance. Nobody wants to go see an ugly website. At the same time, people leave if a site doesn’t load fast enough. What good is a beautiful page when nobody’s there to see it?

An argument for the pro side is that internet connectivity has undergone a broadband revolution and are fast enough to accommodate large images. That’s not really the case. Online usage has tipped to around 60% mobile. And mobile internet hasn’t really caught up to desktop speed yet. Not to mention, some carriers limit download speeds.

The industry rule of thumb is sites should fully load at 3 seconds for desktop and 5 seconds for mobile. Personally, I prefer the 2-second mark.

Search engines demand fast sites
Page load speed is universally recognised as a ranking factor. Search engines want to provide their users the best sites. Let’s face it, a site that takes ages to load doesn’t really provide a good user experience. Again, images make up the bulk of web pages. Optimising them boosts your website’s position on results pages.

5 Steps to Basic Image SEO

Let’s start off with the simple stuff. Everyday activities that you can perform without any technical background.

File Name
This is the most basic of all the steps. Anything is better than your camera’s auto-generated P0001er.jpg. But we’re not really going to settle for just anything. We need to use informative file names. We want to be as clear and as descriptive as possible. It should be in plain English with a keyword inserted somewhere. There’s a huge difference between red-2012-lamborghini-gallardo-for-sale.jpg and car-for-sale.jpg.

Alt tags and Title tags
Alt tags are what appears when your image can’t load. This helps users know what the image is about during that unfortunate scenario. Hovering on a rendered image will also show the text alternative.

Search engines, as of yet, can’t really crawl images. What they can read are the Alt tags associated with said image. Having proper alt tags inform web spiders what the image is about and improves the chances of the image showing up in search results.

Okay, Title tags are really optional. I usually just put in the same copy as either the Alt Tag or the caption. It’s up to you. If you have time or the copywriting chops, go ahead and create a unique title. Every bit helps.

Caption and Description
Scanning is the most common way people view a webpage. According to KissMetric, captions under images are read 300% more than body copy. Having captions grab the attention of your users. This may make them stop and give closer attention to your content. Not all images need captions. It really depends on if it’ll help inform the user. Always keep over-optimisation in mind.

The description tag is where you include additional details. If your caption is “Couple holding hands while walking along the beach”, a good description can be ‘Shot during sunset in Phuket, Thailand on May 2016 using a canon Leica X-E (Typ 102).”

This is about relevance. Is the image important or helpful in conveying the thoughts of the copy? Does it add value or is it simply there as decoration? At the same time, are the text surrounding the image related? Adding irrelevant images doesn’t really do any harm. But it’s a waste of valuable opportunity of improving your story.

A definite no-no is placing an image on the left side of the copy. It breaks the reading line. We are accustomed to reading left-to-right. Breaking the concentration can lead to losing the attention altogether.

File size
Our ultimate goal is to lessen the file size of images. There are plenty of ways to achieve this from using the humble MS paint to using the correct file type.

1.       Resize the image to correct dimensions - directing the browsers to display an image a certain size doesn’t really lessen the file size. It only changes how it’s rendered. Resizing images before they get uploaded is the correct procedure.

2.       Cropping - cropping not only reduces file size, it often makes your images pop. To be sure, it’s best to consult with a designer.

3.       Image Compression - even if you’re not technical, this can be done using online tools. You just upload your image and they do the rest. The software removes image metadata (information “under the hood”). Newer software does this without any loss in image quality, a win-win for the seo vs designer battle.

4.       Provide separate images for thumbnails
As mentioned above, rendering the same image in different sizes don’t really affect the original file. This is especially true when using just one image for everything including thumbnails. The quick and simple solution is to provide small images to be used specifically as thumbnails.

3 Steps to Advance Image SEO

Image Sitemaps

One of the SEO best practices include consolidating all your images into a single directory. This helps crawlers find all images on your website.

Another is to include images in your sitemap. This involves adding additional tags into each url and adding one or all images on that page to that line of code. There are optional tags but the important one is the <image:loc> tag that indicates where the file is located.     

You also have the option of creating a sitemap just for your images. Usually, this is suggested for sites with thousands of images. But even small sites can go this route. As Google stated, use the method that works best for you! The important part is that you have the images listed.

Follow google’s guidelines for image sitemaps here.

Image Schema Markups
I’m still puzzled at how slow schema markups are being adapted. You’d think that SEOs by now would take advantage of this powerful tool. But you know what? Their failure to adapt is our gain. By adding structured data, we are getting ahead of the curve.

Schema is a set of tags that were agreed upon by the major search engines. This is as direct a signal as there can be. The big boys themselves collaborated to tell us what they need to know and how we can tell them.

There is a schema language for all different types of content. Images is one of the options.

Getting Started

We hope you find this helpful, please feel free to comment or add to it below. The more conversation we can generate the better it will be for everyone (seo marketers and content consumers alike).