Optimising images for SEO

Jul 20th, 2017

It goes without saying that images are an increasingly important part of businesses’ online strategies and that posts which include one or more image tend to gain more traction than those without

With this in mind the fact that you are using images shouldn’t be debated, what does need consideration is the optimisation of them. Images that are well optimised are vital in terms of SEO and are an easy win in terms of gaining an advantage over your competitors.

We therefore thought that we’d look at the things you can do in order to ensure that your images are performing for you.

Choose the right image

The first thing to consider with the optimisation of an image is the image itself. Ask yourself if the picture that you have chosen is suitable for your audience and is suitable for the product or service that you are offering.

Many businesses, especially the larger ones in the market will use their own photographer. This could be an in house specialist, third party or a hired freelancer which will operate under licence. Images produced in this way will be free to use and are normally bespoke to the product or service and can be styled in line with the rest of the website.

Many small businesses however, will rely on using images from photo sharing platforms like Flickr or iStock. Again businesses in this sector have to choose the most suitable ones for their offering but they may find that the choice is limited. This can lead to a disjointed appearance to a website as it will become increasingly difficult to find 10, 20, 50+ images that all relate.

There are some considerations however. Whilst you can find a picture fairly quickly, finding one that you can legally use for commercial purposes or even one that has no copyright restrictions – can be difficult. In this instance it is vital that you make certain you have all necessary permissions to use or modify the image for your own purposes.

Choose the right file format

According to the team at Moz.com choosing the correct file format is vital and is one of the key considerations when it comes to optimising for SEO purposes. They say that: “Since we are mostly concerned with pictures and relatively complicated “photorealistic” graphics, we have to choose from three commonly used raster image formats: GIF, PNG, and JPEG.”

  • JPEG is the most commonly used image format today. It uses lossy data compression, which means that, depending on your settings, the image quality can suffer quite a bit. There is also no support for transparent backgrounds like there is with GIF and PNG formats. The biggest advantages of using this format is it keeps file sizes small without degradation and it is supported almost everywhere.
  • GIF is a bitmap image format used for simple art and animations. Because it supports only 256 colours, it’s not recommended for photographs or more photorealistic images. However, its small file size and support for transparent backgrounds make it ideal for company logos and various page elements of websites.
  • PNG is a modern alternative to GIF and JPEG file formats. PNG supports transparency, has a better colour range, and automatic gamma correction ability. PNG can even store a short text description of the image’s content to help search engines categorise your images. This file format is the newest of all three, which means it’s not so readily supported. Also, file sizes can be a bit larger.

Name your files wisely

There is no point having a photo if you can’t find it and to that end the naming of the files is vital. Many businesses will take photos at events or for social media purposes and not use them straight away. Others will take a picture whilst they are away from the office or perhaps one to use on a future communication.

Making sure that you name the file correctly and place it in a location that you can find easily, goes without saying. When images are sent directly to a file on your computer or are stored on the memory card of a camera they will be allocated a title based on their location in the file.

In this instance, give them a new name that’s descriptive, and which makes it easier for search engines to find them.

A good example would be: IMG_London_Sportswear_Trainers_2017_01.

This example tells the search engine that this is an image, taken in London, of sportswear, specifically trainers and that it is the first product shot taken in 2017. Doing this will adhere to Google’s image publishing guidelines and means that file name will be used as the image’s snippet in search results.

Add the alt text

Alt tags provide a text alternative to an image. They are a way to “describe” an image to those who can’t see the image. Search engine crawlers also use alt tags to decipher what an image is or what it is representing.

If you have images on your web pages that are not described by an alt tag your HTML is not valid and you are not following this (and other) Google webmaster guidelines.

According to Yoast: “In situations where the image is not available to the reader, perhaps because they have turned off images in their web browser or are using a screen reader due to a visual impairment, the alternative text ensures that no information or functionality is lost. Be sure to add alt texts. Make sure the alt text includes the SEO keyword for that page and relates to / describes the image.”

It is therefore vital that you are adding the alt tags and giving the image the best possible chance of adding to your SEO performance.

Example of image showing where to add alt tags

Below are a few quick tips from the Content Marketing Institute for creating effective alt attributes.

Keep it simple – No one knows the perfect number of words, but plan on 10 to 15 to convey something about the image.

Be descriptive yet succinct – Describe what’s happening, mention some of the features of a product, note colours, etc. Don’t simply repeat the same words from the image name.

Consider the text surrounding the image – Place images with alt tags near relevant text

Photo descriptions and captions

Photo descriptions and captions act as a sort of header and footer to an image. The description is in the form of a title tag which is the data that people will see when they hover over an image.

Title tags are the perfect place to add keywords and Search Engine Journal say: “If you have a specific search term you’re targeting with your blog post, make sure that term appears in at least one image title tag, too. But don’t go overboard with it, of course. This is far from hidden text, so you won’t want to fill the space with garbage. Be respectful and keep the jargon to a minimum. But do use this space to advance your keyword cause.”

The caption of the image is the text that accompanies the image. It is important because people use image text when scanning an article. Next to headings, people tend to scan the image and caption to build a quicker understanding of what is being offered and if it represents use or value.

Example of captioned image
Example of an image captioned with keywords

Evidence based, user experience research group, Nielsen Norman highlighted the importance of a caption under an image and said that in order to get the best of them you should add certain elements. The things that enhance scanning include headings, large type, bold text, highlighted text, bulleted lists, graphics, captions, topic sentences, and tables of contents.

Captions under images are read on average 300% more than the body copy itself, so not using them, or not using them correctly, means missing out on an opportunity to engage a huge number of potential readers.

Sizing your images

One of the main things that can hold you back when it comes to your website is slow page loading time. If your website takes an age to load then the likelihood of visitors sticking around or returning are low. It is for this reason that resizing images is so important.

Huge image files which drag the page-load time of your site down directly affect your rankings on search engines, so be sure to resize them before you upload. This process is easier than it sounds and most computers have a basic tool in which the changes can be done. Mac users are able to choose the ‘Adjust Size’ option on the tools tab, or PC users able to use basic tools like MS Paint.

Just open up Paint, then click Open, choose the picture you want to resize and open it. Then on the Home tab, under Image Group, click Resize. Advanced users can also make changes in programmes such as Photoshop. Another consideration is that images taken on a mobile device can be in excess of 3,000 pixels wide (2,500 pixels larger than needed).

When optimising images for the web, your goal is to reduce the file size as much as possible, without sacrificing too much in terms of image quality.

Create an image sitemap

Google encourages you to use image sitemaps to give their search engine more information about the images available on your website. This allows them to find even those images that are loaded by a JavaScript code, which is often the case with product images and slider galleries.

A sitemap is like a travel map. It tells Google where it should go, so it can crawl your site quicker and get more of your content into the search results. Having a sitemap is great for SEO, and often for UX. Basically, for each URL you list in your sitemap, you can add additional information about images on that page.

According to Wordtracker there are two types of sitemaps, HTML and XML.

The say: “A HTML sitemap is really just a list of links. If your site doesn’t have lots of rich media (videos, images etc) and is smaller (ie, has a relatively simple structure and doesn’t have lots of categories) this would be the way to go.

“Users typically prefer them because they help with navigation. (But be aware that Google formally recommends using the XML format because it’s recognised by other search engines.)

“If you do still want to create an HTML one, this sitemap generator creates HTML sitemaps automatically and quickly. Using it is straightforward: put your web address (URL) where prompted and off you go.

“An XML site map isn’t visible to users, but they’re better if you have a large site. This is because you can create sitemaps within sitemaps, (eg, in your main sitemap you can link to other sitemaps that map out a sub-category of your site).

“To start with, you have a choice to make. Are you going to have one sitemap, or are you going to have lots? Basically, if your site is huge (over 50,000) pages, you’re best having more than one. The purpose of a XML sitemap is to help Google find your key content more easily. “Having multiple sitemaps helps Google get a sense of hierarchy so it can make your best content available super-quick.”

If you already have a sitemap for your site you can add image information to it or create a separate sitemap just for your images.

Following these tips and making sure that you pay attention to the way you select, format, name and tag your images can be highly beneficial to your SEO performance.

Need help with your search marketing? Why not get in touch? Or subscribe to our newsletter for industry leading insights.

Facebook Twitter Instagram Linkedin Youtube