Image Formats and SEO

This article describes image types, their use, and how they affect Search Engine Optimisation (SEO) on Gizmo's Tech Support Alert ( TSA) website.

Image Formats

There are several image formats in common use on the Net. Three are used frequently on websites:

jpg or jpeg
png
gif
bmp - a bitmap is sometimes seen, but is not common on websites.
tif or tiff - again, not used on websites.

All have a use in the right place. Here are the pros and cons for each.

jpg
This is the most common fileformat. It is a compressed, lossy format in general use for every purpose. If in doubt, use a jpg. It can be read by all browsers and is generally acceptable for all uses. Depending on the amount of compression chosen, it can be a small file or a medium size one - from a tiny file of 1kB for a small graphic, to say 300kB for a very large image. Images of over 60kB or so are not normally advised due to the higher loading time for a browser.

Jpegs work well for most images except those with bright red areas on white, or sharp text on a contrast background. In these types of images there will be noticeable colour bleed off the red or the text onto the background. These are compression artefacts and hard to eliminate in some types of jpg images. This type of image calls for a gif, if possible.

png
This is a good quality modern graphic fileformat. It is accepted as the best solution for website purposes but is not yet fully supported. Or - it is supported everywhere except by the trash browser, aka Internet Exploder.

For reasons known only to themselves, but undoubtedly involving money somewhere, MS never implemented support for it. In this way they have effectively sabotaged its use, which is a shame. IE6 has no support but it can be fixed by server scripts that tell it what to do; IE7 has slightly better support but is still imperfect. This issue causes developers and webmasters everywhere a lot of grief.

A png is perhaps a more modern form of gif, in that it also has support for transparent areas in the image. This is a vital factor and also one reason why IE cannot read it properly, as it does not support image transparencies properly. A png can be used if it has no transparent areas, but there are always problems with IE. The filesize is similar to jpg.

gif
The gif is an excellent image format for two reasons: it supports transparent areas, and it reproduces text very crisply - which a jpeg cannot do as well as a gif.

It was the copyright of Compuserve till that ran out recently, and this was one of the driving forces that caused the png to be developed. No one could safely use a gif without risk of legal implications. That is over now so the gif has returned with added strength, especially as IE cannot support png correctly.

The gif has support for only 256 colours, so a complex, colourful image will not reproduce well. Gradients are especially poor. However, text is beautifully crisp, and in general a good rule is: if the image has any text at all in it - use a gif. All browsers support a gif, and it can have a remarkably small filesize for the image quality.

As an example, a one-third screen size screengrab will be 1.5MB in tif, 300kB in jpg, and 30kB in gif There will be no discernible quality loss in the gif as far as general web use goes. But remember - it's best for plain images with text, not so good for colourful ones.

bmp
Another format seen is the bitmap. The filesize is large, very similar to a tif's. It is also a high-quality image in that all the original data is in there. Normally it cannot be used on the web as it is too large. In addition, web applications have imperfect support for it, as it is rare in website use - as for a tif, which has the same restrictions.

A bmp is a good base format to store images in for further use, but cannot be used successfully on the web for general purposes.

tif
This is a high-quality file that is one stage above a jpg. Often a tif is provided as the original file, then a jpg is produced from it for web use. A tif file of, for example, one-third of a screenshot will be about 1.5MB. This is much too large for web use.

Image Use Advice

           + Use a jpg if in doubt

           + However, if there is any text in the image, you might find a gif is clearer and sharper

           + A gif can always be used in any situation - but it doesn't do complex colours well

Images and SEO

In order to get maximum benefit, images need to be named correctly. There are four opportunities to name an image.

1. Image name
This should be very brief and relevant. Use a keyword as this is appreciated by users and search engines. Don't have any spaces in the filepath, fill them with hyphens.
Right: best-antivirus.jpg
Wrong: 2749gsj_08.jpg

2. Alt tag
This, or alt text, is slang for the alternative text attribute. This is text that describes the image. It can act as a placeholder; or a loading message; or an on-hover info source; or as a screenreader input (a sight-disabled person's browser). It has many uses and is an important part of the image's make-up.

Please don't omit it as there are various repercussions if this happens:- we lose a search opportunity, the page code fails validation (it's a code error), and an accessibility test will fail.

3. Caption
A caption is a short text description placed on the page next to the picture. It can give any information you like, though a sensible thing would be to name it correctly - use a keyword variation in it.

4. The Title
This is a new feature in HTML. Because the single and only good thing that Internet Exploder ever did was to show the alt text on hover - which is a non-standard mechanism that is not in HTML but nevertheless works well - other standards-compliant browsers were missing out. So a new tag was introduced, the title tag. The text in this shows on hover, in a proper browser. You can use it or not - it has no importance. However if you use it, it is of course a naming opportunity.

Because there are four options for naming images, we can and should use keyword variations. By all means make two out of the four your main theme keywords; but the others are probably best made as variations.
 

Underscores

Never use an underscore (like_this) for any purpose on the web. Never use it on a website for anything. It's useful on a PC for removing filename spaces, but has no web application.

This is because search engines can read but not parse it, ie understand it. The resulting single word is meaningless gibberish as it does not correspond to anything in the database. It's a good search term opportunity lost.

Instead, use hyphens for joining words (like-this). This method is always correct as a hyphen is dropped by anything reading and/or parsing it, and leaves the space intact. An underscore effectively jams up the parser and produces zero data.

DO NOT use an underscore in image names or anywhere else.