How to optimise images for SEO, in 2 seconds…

Image OptimisationA question I get asked is – how can I speed up the load time of my website? This is another factor of the Google algorithm, so it’s imperative to make sure every millisecond counts.

There are many areas to look at including:

  • Website code
  • Amount of text on page
  • CSS file size
  • Webpage file size

But, one of the most common areas I have found is the size of the images on a website!


There are hundreds of business websites including:

  • Retail
  • Photographers
  • Magazine sites
  • Automotive
  • And many more…

…which include large images that haven’t been optimised for faster load times, thus very frustrating for users having to wait for a webpage (or images) to load.

A golden rule of thumb is you have 8 seconds to sell on a website…

…so your website, including the images, needs to load fast!

Now, I’m going to show you how to optimise your images for SEO.

So lets take a standard image, the Ferrari F1 logo.

Ferrari F1 Logo

The size of this image is 44KB, which is quite large for an image with the dimensions 250px x 136px.

For standard web images, including banners, a maximum file size of 30KB of less is standard. Sometimes for larger images and animated banners, it has to be higher.

Now the cleaver bit…

When you save an image in Adobe Photoshop, it gives you the JPEG Options after you have chosen a file name:

Optimise images for SEO

Now the tip here is to lower the quality to the number 8, which still retains great quality for web images.

Now we have done this and saved the image – the file size of the image has dropped.

So here is the new image:

Optimised Ferrari LogoThe new file size is 30KB so we have saved a total of 14KB with this little trick.

There are other ways to do the above. One of the best ways is to use Adobe Fireworks, but the process is 4 times as long, so this is the quickest and easiest method to optimise your images.

Here is the fun bit…

Out of the two images, can you guess which is the optimised version?

Ferrari Logo Unoptimised

Ferrari Logo Optimised

The top image is not optimised and the bottom image is optimised, and the quality between the two is still excellent!

So what’s next?

The next thing to do is give your images appropriate file names.

So the unoptimised version of the image is called:

 

ferrari-f1-logo.jpg

The optimised version is called:

ferrari-f1-logo-optimise.jpg

As you can see the two images have different filenames which match the content of the post and describes what the image is.

Let’s say you are a wedding photographer…

You’ve taken a picture of a couple at Chatsworth House which you are going to use for promotional purposes. the best file names for the image would be:

  • weddingphotochatsworth.jpg
  • chatsworthweddingphoto.jpg
  • chatsworthhousewedding.jpg

This not only helps with image descriptions, but is a great way to include keywords onto a page for SEO purposes, not forgetting the ALT tag of course!

Now going back to image filesizes…

The advantages of lowering or optimising images include:

  • Quicker load times
  • Less bandwidth usage
  • Less server space required

All of the above will then save you money on your hosting and gets the right messages (or images) in front of potential customers quicker.

Happy optimising…

This post was written by , Dave is a digital marketer specialising in SEO and PPC, and can be followed on Twitter, Facebook, LinkedIn and Google+.

6 Responses to “How to optimise images for SEO, in 2 seconds…”

  1. [...] This post was mentioned on Twitter by Dave Cain, Dave Cain. Dave Cain said: @damienlovegrove: How to optimise images for SEO: http://goo.gl/O50UY <– Great for photography websites! [...]

  2. Missfeldt says:

    Nice article, thanks for sharing.
    Perhaps the users who would like to reduce the filesize wants to know how to do this with other programms e.g Gimp. Those who use Photoshop may know how to optimze filesize… Hopefully.
    Best wishes, Martin

    • Dave Cain says:

      @ Martin – Thanks for the feedback, Gimp is a great program. This guide was aimed at quick wins and the above can be done in about 2 seconds and has great benefit.

  3. I always use the save for web option in Photoshop. For gif-files is a transparent background a solution to save kb’s.

  4. Hi Dave,

    I enjoy reading your blog articles and snippets.

    It might also be worth expanding on the different file types in relation to saving kbs—a GIF or PNG version of the same graphic can be optimised to be a third less than the JPEG and the quality is ultimately better too as you don’t have any noise or compression artefacts.

    Jpegs for photos, and Gifs/Pngs for solid colours and flat graphics like the logo above!

    I also enjoyed your 2W Q/A – a little uneasy about it being streamed though. :)

  5. Robb Clarke says:

    Using “Save For Web and Devices” in Photoshop actually produces smaller file sizes than just saving a jpg and dropping the file quality.

    Downloading the same Ferrari logo (saved at 49k) and then saving for web and devices gave me a file size of 15kb afterwards, saving 34kb.

  • Categories

  • Archives