How to Optimise Images for Search

Image search provides inspiration and ideas for million of web users. You can increase your click through ratio and reduce your bounce rate if you implement an effective process for optimising your website images. Yet, how much image optimisation you undertake will depend on the number and quality of your images, in relation to the rest of your website.

Optimising your photographs may not be that important if you only have a couple of images for your small brochure website. However, for many larger multimedia orientated websites, it has become very important to help search engines understand the context of meaning of these images. Optimising images has become part of the ranking process. Search bots are becoming increasingly sophisticated in identifying the textual elements related to an image, to understand and 'see' that image as a human would. Users are also becoming much more savvy at using image search to get ideas and inspiration.

So, if you can produce and copyright your own high-quality images, you can drive extra traffic through your website. You need to make sure your images render as fast as possible and thus don't slow down the overall page loading times. Users expect fast loading webpages with interesting, high quality images. Speed optimisation is an integral part of image optimisation and is a wider webmaster challenge in itself.

Here are my Top 10 Tips for driving extra traffic to your website, by optimising your images:-

1) Use Meaningful Filenames - help bots by using meaningful filenames. For example, if you have a picture of a house, call it house.jpeg - not 9649HDD.jpeg. In other words, match up the file name to the picture and your targeted key phrase for the webpage.

2) Implement ALT Tags - to help visually impaired people, or people who have turned off images within the browser settings, always attach a realistic and appropriate ALT tag. The ALT tag should describe what image is. It should definitely NOT be used as a flimsy excuse to stuff keywords. Keep each ALT tag unique between different images on the same domain. You should also include a 'Title' tag which, (although is not a ranking factor), provides additional explanation of what the image is.

3) Use Descriptive Text Nearby - create a unique caption and description near each image. Make sure these are placed as close as possible to the image itself. Wrap them in a container to ensure a close proximity. If you own the copyright to the image, you could also include details of the author, and the location and data the photo was taken. All this textual data can be 'marked up' using the new schema language. This provides definitive meaning and context to the individual elements related to the image itself. Here is an example of an ideal set of source code, taking into account the points above.

4) Only Publish Unique Images - focus on creating your own multimedia content that you have copyrighted, watermarked. Technologies do exist for search engines to test an images uniqueness and relevancy. Therefore, there is little point in optimising an image you have purchased to re-use from a commercial image archive website. This is because you are probably one of hundreds of people publishing the same image over and over again. So try and photograph the images yourself, and make sure they do not exist anywhere else on the web before you publish them first. You can share your images under licence in exchange for a linkback.

5) Help other Webmasters to Link Back to your Image - by providing an HTML snippet of the link back code, you can help Webmasters link back to your site (using the relevant anchor text keyphrase of your choice).

6) Organise Your Image Files Carefully - the greater the number of images you are publishing, the more important it becomes to organise them in a logical way. Separate related images into separate, logically named subfolders. If you are producing exceptionally high-quality photos, you could create a separate landing page for each image. Separate image landing pages present a bit of a webmaster dilemma. To avoid each page being classed as 'shallow content', you should elaborate in the description with a few hundred really meaningful words that describe what users are looking at. You can also provide a comments form on each image landing page. This will encourage users to express their opinion and freshen up textual paragraphs.

7) Minimise Image Page Loading Time - crop only part of the image you actually need, before compressing the file to its minimum file size (using one of the many shareware tools). A typical digital camera will produce high quality image of 6MB and off the page width and height dimensions. You need is to get this down to under 50K per image. Make sure if you are cropping a large image, users do not need to scroll down in the browser to view the bottom half of the photo. Similarly, specifying a height and weight in pixels, speeds up the rendering of the image within the browser. Avoid using the bitmap or PNG format, (as these do not compress very well). Remember you are trying to focus on getting away with the bare minimum file size, while not sacrificing the quality of the image when rendered online.

Lastly, make sure there are no broken source links to image filenames. Broken image links will mean that browsers will continue to try and re-download the file, wasting valuable page loading time. Broken links typically happen when you misspell a file name in the html. Another common error involves accidentally using relative pathnames to subfolders that don't exist. Always use absolute URLs (which will mini your typos) as well as help bots navigate their way through your file structure.

8) Caching Issues - to allow bots to take copy of the image, you should make sure your robots.txt file does not accidentally block your image directory. You can also create an image site map. Make sure your internal link structure supports your landing page from other related webpages within your site. It may be tempting to use a flashy JavaScript based scrolling image gallery. However, bots struggle to follow JavaScript. So, you may end up accidentally blocking bots access to the image landing page. Use keyword rich anchor text for these internal links to help give meaning and context to the image. Lastly, preload some images you are re-using over and over again (such as the main title image). This will place a copy of the image in the cache of the visitors browser, eliminating need to request or 'call' the file over and over again.

9) At EXIF Metadata to Your Images - many modern digital cameras provide 'Geo-Tagging' capabilities, as well as the ability to alter the meta data of each image taken. This meta data includes things such as Image description, artist, copyright, location, longitude and latitude, and technical data regarding the image quality. You can also add meta data to your files by using specialist PC based software. Note that many compressing software tools will inadvertently remove this EXIF meta data. Therefore, you will need to crop and compress your image, and save it as a friendly filename, before you add any meta data to it.

10) Use Image Sprites for Minor Images - for the less important minor images that you do NOT want cached, you should use an image sprite. Minor images include things like bullets, dividers, menu buttons, rounded corners, background blocks and so on. An image sprite is a collection of images merged into one file. Using CSS, only part of the image that is required is displayed. Using a sprite reduces the number of HTTP requests made on your server. This will speed up your page loading time.

I hope you find these tips useful...