Craig Francis

Text in Images

When a website wants to use a specific font, that isn't available on most computers, then it is fairly common practice to use an image.

Typically these obscure fonts are used to either match the "corporate font" used by the company (to give the impression of consistency), or due to the visual appeal of some alternative fonts, as some designers get bored using the same 4-5 fonts.

Poor eyesight

One of the problems with using text in images is that they cannot be resized without stretching the image from its native resolution, which usually results in a pixelated rendering. This issue can be overcome by using a vector based image, however at the time of writing this article, these are currently not available by default in most browsers.

Alternatively, if the text had been written into the HTML document, instead of using an image, then it would allow most (if not all) visitors to re-size the font to their own preference - which is perhaps of most use to people who have less than average vision, or sit more than a few centimetres away from their computer monitor when using a website with micro fonts.

Cannot see the images

Now ignoring the average website visitor, there are some people who don't even use a monitor. This group includes the visually impaired, who tend to use screen readers (software which describes the page with voice), but also search engine spiders, and you cannot forget the people on slow internet connections who may disable images to make the web pages load faster, or even users of non graphical browsers (like Lynx).

Fortunately it is possible to add what is called an alt tag. This allows the websites author to specify some alternate text when the image cannot be rendered. Its fairly simple to add, but allot of website developers do not provide this information, as they either don't know it exists or are too lazy to add it.

However there is also a problem for website authors who do spend the time adding the alt tags, as when the text in the image changes, the alt tag might not get updated - this can cause allot of confusion for visitors who use this information.

I should also point out there are several image replacement techniques using all sorts of CSS / JavaScript / Flash combinations, however I personally find that most of them don't add anything more than a simple:

<img src="fileName.gif" alt="Text" />

Going too far

Although I will not complain about a website author adding too many alt tags, I should point out there are some cases where they are not required. For example, when building an image gallery of all the employees of a company, if the name is written below the image in HTML text, then it would be unnecessary to also include that name on the alt tag of the image, as it is simply repeating the information.

Any feedback would be greatly appreciated, I don't include comments due to the admin time required, but if you email me, I will reply and make appropriate updates. Also, if you would like to take a copy of this article, please read the terms this article is released under. This article was originally written Saturday 10th February 2007.