Improving your image - SEO tips, thoughts and ideas

I recently came across some SEO advice (in webceo's email newsletter) on how to improve the effectiveness of images on your website, and a few tips caught my eye that caused me to stop and think:

• Use high resolution images, if available. Provide different resolutions of images.


• Check how your image looks in thumbnail size. Stronger contrast is needed to better discern an image, which might lead to more people clicking on and linking to the image.


• Provide a small description of an image in the alt attribute of the img tag, but do not fill the alt attribute with tons of keywords, even if they are relevant.


• Think of also using a short image title with keywords in them.


• Use descriptive keywords in your image files' names. Separate words in the file names with a hyphen, not an underscore.

On our main Gite website I've put quite a lot of effort into trying to get decent quality images and photos with the old adage of a "picture tells a thousand words" in the back of my head whilst I've slaved over Photoshop Elements for hours at a time.
I've tried to carefully select, crop, correct, highlight and sharpen to get the best possible results and whilst I have noticed that photos often need the brightness increasing if you're to show them as small thumbnails, I also found that Sharpening and maybe Sharpening a second time improves how well a small thumbnail stands out on the page.

The importance of filling in the image ALT tag cannot be under-estimated in my view as that's your opportunity to help the search engines actually understand what your picture is of.

If your website HTML includes a picture of your holiday home with just the HTML <IMG SRC=gite.jpg> then all that the search engines have to go on is that it's a picture of a Gite.

If on the other hand you've specified the HTML as <IMG SRC=gite.jpg ALT="The front of our lovely French farmhouse Gite"> then think how much more relevant and descriptive this photo becomes?

So following this reasoning I've always filled in ALT text for all the images on my website (and I try too on the Blog as well).

But what about the fourth tip, to use the TITLE tag as well?

Well I noticed some time ago that as well as the ALT text being displayed when an image is being downloaded, in Internet Explorer if you hover your mouse over an image then the ALT text is shown just underneath the cursor as a little 'tool tip'. So if like me you've diligently filled in your ALT tags with a brief description of what the photo is all about then any IE visitors will benefit from your prose automatically.

But I had also noticed that Firefox (which continues to be my browser of choice) doesn't behave this way and your ALT text remains hidden - bum!

When I was working on the most recent addition to our Gite website, the Driving in France page I did some more investigation and discovered that whilst Firefox doesn't make use of the image ALT tag (unless of course it can't download the image for some reason), but it does take notice of the TITLE tag in just the same way as IE by displaying a little tooltip underneath the cursor if you hover your mouse over a picture which has included the TITLE tag.

So putting these together you end up with the best of both worlds with

<IMG SRC=gite.jpg ALT="The front of our lovely French farmhouse Gite" TITLE="Roses climbing over our Gite entrance">

And by carefully choosing different (but equally relevant) text for both the ALT and the TITLE tags then you've doubled the value and meaning that you've given to the photo.

And finally, image filenames.

I have to admit that this is one that I've gone wrong on and have only relatively recently realised that I've got to fix it.

When I started off writing the website I knew I needed semi-meaningful image filenames so I could manage, find and edit the right images (I could never deal with hundreds of images with names like DSCF0583.JPG), but thinking about trying to keep the website HTML page size down as much as possible I decided to use abbreviated filenames so that I didn't unnecessarily bloat the download time.

And so I ended up calling a picture of Josselin Chateau from the riverside "jossch_river.jpg", and Josselin's lovely half-timbered Tourist Information building is "joss_ti.jpg".

In hindsight I realised this is not good and for the sake of a few bytes of text is a futile waste of time.

So last year when I added a new page to the Gite website describing the fantastic world heritage site at Mont St Michel I decided to start my path to correction and duly created far more meaningful image filenames such as "mont_st_michel_narrow_streets_and_shops.jpg".
By doing this I give the search engines much more information to chew on and I'm making it quite obvious that this is a picture of narrow streets and shops at Mont St Michel.

But the webceo advice then partly contradicted this, telling me to use hyphens not underscores - argh, and why?

Well for an answer after a bit of Google searching I came across this excellent post from Matt Cutts of Google's webspam team explaining why you should use hyphens to separate words in a URL.
The summary is that Google treats the underscore as being part of the word so Mont_St_Michel in a filename (or URL) will only result in a match if someone specifically searches for "Mont_St_Michel" whereas if you use hyphens then Google treats this as being a word separator so if your filename is "mont-st-michel-narrow-streets-and-shops.jpg" then your image will be found on a search for "Mont St Michel" - which is what you want of course.

Actually the story doesn't end there as Matt's posting was originally written in August 2005 and it seems that in mid 2007 Google changed its search engine algorithm so that underscores are now treated as word separators.

And sure enough when I tried a search for "mont st michel narrow streets and shops" my picture came up trumps, proving that the underscore is being treated as a word separator now by Google.

Nevertheless I decided to change my image filenames to using hyphens instead of underscores anyway. Long and the short of it is it's more human readable and although Google may not distinguish between underscores and hyphens as as word separators it doesn't mean that other search engines behave the same way. Read the many many comments on Matt's posting for what others think, the consensus seems to be to use hyphens.

I will also make a separate plug for Matt Cutt's Blog, it's one I personally follow and is full of useful (and sometimes not quite so useful) thoughts and ideas.


And finally, I will add one image SEO tip of my own, and frankly I'm surprised that the webceo advice didn't include it because I think it's one of the things that really can put you off a website.

It's to check the size of your images and to reduce them as much as possible. Even with just about everyone on broadband it still takes a few extra seconds to download a 10 Mega-pixel photo saved as 64 million colours. Add that up for several photos on a single website page and you're looking at bored and cheesed off website visitors who might well just click onto somewhere else that's speedier to browse.

To illustrate, the largest image on our Gite website is 74Kb in size and the majority are in the 40-50Kb range. And those sizes are for the fullsize "click for larger picture" variants. The thumbnails that are displayed on each page are all under 10Kb in size and some are as small as 4Kb. I personally recommend the free Irfanview for resizing and shrinking photos.

PS: I now of course have a mammoth job to apply all these improvements across my website. So far I've only applied them all to the hints and tips for driving in France page.

Oh well, will keep me busy in the winter I guess ...