Image Optimisation For Your Site

Three of the most important things to do for SEO in images is to

I. Name Images correctly with a keyword in the name.

DO NOT just upload an image with the name, or number, your camera gave it – or someone else gave it. Rename the image with the right keyword for the page you are placing it on and for the topic on the page.

In Google’s own words: Tell us as much as you can about the image. Give your images detailed, informative filenames.

The filename can give Google clues about the subject matter of the image. Try to make your filename a good description of the subject matter of the image. For example, my-new-black-kitten.jpg is a lot more informative than IMG00023.JPG. Descriptive filenames can also be useful to users: If we’re unable to find suitable text in the page on which we found the image, we’ll use the filename as the image’s snippet in our search results.

II. Reduce images in size so they are optimised for the area they are to occupy on your website.

Okay – time for a bit of technical image stuff which I will try to explain as easily as I can. It’s all about pixels, bytes and resolution.

To find the size of your image on your computer simply check its properties. On a PC right click on a mac Ctrl-click and go to properties then details. (or open the image up in an image programme)

An image from a camera, any camera, is made up of pixels. These are little tiny squares of colour that the image is made up of. As you can see in fig 1.

Image Resolution

An image has a resolution and, funnily enough, resolution uses old fashioned inches and not modern centimetres.

If you are using an image for print you need it to be at least 300dpi. This is 300 dots per inch. So, for printing you need lots of dots per inch so the image is ‘tight’ and prints sharp and clear.

For the screen, however, we only need it to be 72dpi (dots per inch) it can be ‘looser’ and still display well. This means that the ‘weight’ of the image is reduced as well because it doesn’t need to be so tight and have so many pixels in that inch.

Pixels – see figure 2 for an idea of screen size and pixels

As mentioned before, a pixel is a little square of colour. A large screen could be up to about 2000 pixels wide. The largest you need to actually cater for is 1920 pixels wide.

Taking all the above into consideration, think about where you want the image you are choosing to go.

III. Full Screen Images

If the image is for a full screen background then you need that image to be 1920 pixels wide by however deep/high you want it on the screen.

Then you make sure the image is set to 72dpi – no larger.

If you want the image to fill half the screen then you only need the image to be about 800 pixels wide. And so on.

Bytes

Depending on the amount of colour in that image you should be able to reduce it to no more than 200 kb (kilo bytes). 1mb (megabytes) images are made up of 1000 bytes – that’s way too big.

CV TIP: Make sure that all your blog featured images are exactly the same size. I suggest the 600px by 450px as this will then display the blogs in a uniform grid on the archive pages and stop this displaying in a messy and uneven manner.

Keyword Research

I have always said that before you go on the Internet you MUST do keyword research. In fact, I used to say that if you don’t do keyword research before doing business online then don’t bother and go and sit on a desert island. Harsh – not really. Keyword research is like a crystal ball into the minds of your clients. And why wouldn’t you want to have one of them?

No image on your website should be more than 250 kb (kilo bytes) and only then if it is the most important image on your site and you need it to be as clear as it can be.

Blog Images and small images embedded in copy

A blog image and images in copy shouldn’t be more than 600px wide by 450px high. This is a nice size for an embedded image and won’t come in at more than about 40-60kb – depending on colour density.

Gallery Images

If you are choosing to have a gallery on your website and it is important for your visitors to see the images at a nice large size on their screen then 800px by 650px is a good size and no more than 70-90kb.

I hope this gives you a good idea of how images should be named and sized according to where you want to display them.

Getting images wrong is one of the biggest mistakes people make with their website. Don’t make it yours!

One more thing. Getting your images reduced correctly is now easier than ever and you don’t need expensive software to do it. Just search on a browser for ‘image optimiser/optimizer’ and you will find many quick and easy tools out there.

Image Optimiser

If you already have lots of high resolutions images on your website then, depending on how important your SEO is to you and the work you want to do, you can use an optimiser plugin and an image management tool (this one is amazing!). That or you can recreate your images and delete the ones there and replace them with the optimised ones.

There are various options and we are happy to advise or help.

Add ALT text to the image

ALT text is ‘Alternative Text’ and there is a field or place behind the image where you can place this text. In WordPress and other popular website building platforms this is very easy as they provide a clear field for this.

But, again, to demonstrate how important this is, in Google’s own words:

The alt attribute is used to describe the contents of an image file. It’s important for several reasons:

• It provides Google with useful information about the subject matter of the image. We use this information to help determine the best image to return for a user’s query.

• Many people-for example, users with visual impairments, or people using screen readers or who have low-bandwidth connections—may not be able to see images on web pages.

• Descriptive alt text provides these users with important information.

Some example of good and bad alt text:
Not so good:
Better:
Best:
To be avoided:

Filling alt attributes with keywords (“keyword stuffing”) results in a negative user experience, and may cause your site to be perceived as spam.

Instead, focus on creating useful, information-rich content that uses keywords appropriately and in context.

Learn From Google Analytics