Image Optimisation – images indexed correctly and loading faster

Monitor showing imagesHappy New Year everyone and welcome to our first post of 2013!

A Picture Says A Thousand Words right? Whoever came up with this cliche probably did so well before the days of Google, because there are many images out there that aren’t saying a single word. In the online world this means missed opportunities.

So for today’s class we’re going back to basics, as understanding images and their correct use is a must for anyone who has an online presence.

What is image optimisation?

Image optimisation is just a fancy term for making sure your images can be understood by Search Engines (like Google, Bing and Yahoo). It also refers to image speed; ensuring your page load time is kept to a minimum.

Why does it matter?

Reducing the quantity and size of images loading on a page can result in quicker page speed for visitors (including search engines). Since the loading time of a page can have an impact on ranking, providing a faster experience can help deliver more traffic to your site and potentially more money in your pocket.

How it all works

Let’s take an example of a jewellery website with a product page of a Big Blue Ring:

Screenshot of image not optimized

Now let’s assume that on this particular page the code for this ‘ring image’ is:

<img src="" width="" height="" alt="" title= "" />

This image has not been optimised as several of the values (between the “” marks) are empty. Don’t be afraid if you don’t understand the snippet above; the point of this post is to ensure you have a good understanding of this code by the time you reach the end.

What follows below is an introduction to each attribute within the image code shown above:

img src

  • What it is:

    The ‘src‘ (Source) informs the browser where an image is located within your site. For our example the img src is /images/4561817618.jpg. Although changing the location of images within your website may be difficult (it’s best practice to keep all images in a single directory for ease of maintenance) what we can change here is the ‘file name’ of this image.

  • Why it matters:

    Google has stated that in instances where an ‘alt attribute’ (discussed further down) has been left blank it will take the file name (in this instance 4561817618.jpg) to identify and describe the image. In our example Google will label our image as ‘4561817618‘ which is not on a person’s top 10 list of words to type into Google. By changing the file name to something descriptive such as ‘Big Blue Ring’ we give ourselves a far better chance of being found by people searching for this particular product.

    Vanessa Fox refers to an interesting finding in her book ‘Marketing in the Age of Google‘, where an eye scanning study revealed that people tend to skim down to ‘image results’ first, when they appear in the Search Engine Display Results, they then look at the ‘text listing’ immediately below these images before shifting their attention back to the top of the page.

    Google image results in normal search

  • What makes a good img src?

    Anything thats as short and descriptive as possible. Ideally we’d like our img src to read: img src="" where all ‘images’ are in one directory directly beneath the root directory. But let’s say in this instance it’s not possible. Ensuring a descriptive file name is still a good win. Making sure the file name of the image itself reads ‘big-blue-ring.jpg‘ would suffice.

    When naming files ensure you use hyphens to separate words; it tends to have a slight advantage in Google. Don’t use spaces as these make the file name unreadable. Hence our new img src will now become: img src=""

Width and height

  • What it is:

    These attributes inform web browsers of the size of your image before it is loaded. For our example the ‘width‘ and ‘height‘ attributes are blank.

  • Why it matters:

    When a webpage is loaded, a browser will download elements of that page (such as images, text, logos etc.). If you define the width and height of all images, your browser can start rendering the page even before these images are downloaded.

    Defining the width and height of an image therefore helps webpages load faster.

  • How to fix it:

    In this example all we need to do is include the image dimensions measured in pixels. So this part of the code becomes: width="589" height="502".

Alt Attribute

  • What it is:

    In our example the ‘alt attribute’ (alt="") is left blank. The Alternate text attribute is important as it serves 3 primary purposes:

    1. It tells Search Engines what the image is (in our case a ‘Big Blue Ring’)
    2. It displays text to viewers when an image fails to load
    3. It acts as the ‘Anchor Text’ when an image is linked.
  • Why it matters:

    Having an Alt Attribute will help to ensure your image is indexed appropriately within Google’s Image search results so people searching for your product have a greater chance of coming across it.

    It also ensures that when an image fails to load your customers can still see the significance of that image. The picture below shows our Big Blue Ring failing to load, but the user can still see it is a picture of a Big Blue Ring which is on sale.

    benefits of using alt attribute

  • What makes a good Alt Attribute?

    The best Alt Attributes are those which are as short and descriptive as possible. In our example the Alt Attribute will become: alt="Big Blue Ring". Avoid unnaturally adding keywords to images on a page. E.g., don’t add ‘buy rings online’ to your brand logo as this can be deemed as ‘keyword stuffing’ resulting in lower rankings.

Title Attribute

  • What it is:

    The title attribute is displayed when a user ‘hovers’ their mouse over an image. For our example the ‘title’ attribute (title="") is left blank.

  • Why it matters:

    This one has more to do with ‘user experience’ than anything else. As a general rule of thumb I always like to include a Title Attribute because I believe if Search Engines can see the description of an image it’s only fair that people can as well.

  • What makes a good Title Attribute?

    It’s usually best to make the ‘Alt Attribute’ and ‘Title Attribute’ the same as one could argue it’s misleading to tell Search Engines one thing and users another. So this part of our code becomes: title="Big Blue Ring".

    So after all of that our new image code on this page becomes:
    <img src="" width="589" height="502" alt="Big Blue Ring" title= "Big Blue Ring" />

So, now you know the basics of Image Optimisation and have an understanding of the image code, why it matters and how to make it work for your site.

If you’re like me and consistently have an unquenched thirst for knowledge, I suggest reading further into subject areas such as selecting the best file type for images , CSS Sprites  and Image Sitemaps.

No comments yet.

Leave a Reply

  • badges-women-top10-logo
  • AwardsBadge#2
  • GACP resize
  • Yahoo Certified
  • Adwords Qualified Company
We've joined Performics logo

We've joined the global performance marketing network Performics. Visit our new website today

You have Successfully Subscribed!