The speed of a website is a key ranking signal in the eyes of Google, and yet so many organisations and webmasters allow their site’s to become lumbering beasts that not only frustrate users, but also struggle in search.

The images used on a website are one of the main causes of slow page load times, but there are a number of things you can do to ensure your images are well optimised for search engines.

Make sure they’re relevant

Before going into how to optimise your images, I first want to make the point that your images should always be relevant to the content on the page. Avoid using stock images that don’t add any value just for the sake of it.

You should also surround your images with relevant text and keywords, as this will help them to rank better in Google’s image search.

Where possible, try to represent data in graphs and tables rather than text as these are much easier for users to digest.

Reduce the size of your images

Gone are the days when the only images on websites were small and low resolution. Today, sites are more than capable of displaying stunning high resolution pictures, but they come at a cost.

The higher the resolution, the longer a webpage will take to load.

If an image file is large (we’d suggest that anything over 2mb is too big) you can use tools such as Optimizilla or WP Smush to reduce the file size and ensure browsers are able to load them faster. Use SVGs where possible as these can be scaled up and down without reducing the quality.

Some CMS platforms, such as WordPress, will provide different size options as soon as you’ve uploaded an image. However, note that this only defines the display size of the image — the file size will remain the same unless you compress it first.

Sprites

One trick that can be employed on web pages that contain many different images is the use of sprites.

Sprites are single images that are made up of many smaller images. CSS (cascading style sheets) can then be used to instruct the browser which part of that image should be loaded. This single sprite can be loaded much faster than if it was broken up into its numerous parts. They are typically used for images that are used many times on a website, for example in navigation bars or footers.

Image tags and Alt attributes

There are a couple of code-level elements to consider when uploading images to the web. Let’s take a look at this example of an image tag (<img>):

<img src="http://cdn2.hubspot.net/Blog_Images/4-things-to-be-wary-of-pitch.jpg" alt="An-upward-graph-overlayed-on-a-football-pitch" title="4-things-to-be-wary-of-pitch.jpg" width="730" height="486">

First of all, the source attribute, denoted by ‘src=”....’, instructs the CMS as to where the image is located to ensure it is able to display it properly.

Next we have the alt attribute which serves two functions.

  1. First, the alt text is used to explain to the search engines what the image is about. Note that, although adding an alt tag will not help your images or web pages to rank in and of itself, they are essential to ensure they have a chance of ranking for relevant search terms.
  2. The alt text is what will be displayed to the user if the image is not able to load for some reason, or if the user is using a screen-reading device.

The title attribute isn’t important for SEO, but by naming your image something relevant you’ll be able to locate it easier in the back-end of your website if you have to search for it.

Images are a small but important part of onpage SEO, and something that doesn’t require fantastic technical skills to implement. If you’d like to find out more about onpage search engine optimisation why not check out our eBook on the subject? You can access this free download by clicking on the link below.