Text as Images in Web Pages

October 14th, 2008 Amir Posted in Guides, Website tips |

What does ‘text as images’ mean?

A web page can contain many different elements, such as texts, graphics, Flash and other embedded objects. It’s possible to create things that appear the same way using different techniques.

For example, the following ‘Download’ button:

Text version	Graphics version
DOWNLOAD

Although these two buttons look very similar, they are in fact quite different. One is the text ‘Download’, formatted to appear like 3D button and the other is an image, in which the word ‘Download’ is drawn.

Images that contain text make website translation a difficult task. The translator cannot reproduce the ‘translated’ images. Instead, the translator will provide translation for the text in the images, which can be used by the graphics artist who created the original image to create images with translated texts.

Images that contain text also make websites unclear to search engines. Search engines cannot understand the text that appears in images and don’t fully trust alternative texts that we supply. So, they prefer not to serve text in images as search results.

Unfortunately, text in images is typically found in the site’s most critical elements, such as in the tagline, navigation and calls for action. The reason for this is the graphics designer who built the website paid special importance to appearance and chose to make the most important parts of the website look as pretty as possible. As a result, their usability is the lowest, both for human visitors and for search engines.

Graphics designers like images with texts

Clearly, most graphics designers understand the problems associated with placing texts in images. What is their motivation for doing this in new designs?

Web design usually begins as an image. A graphics designer creates a drawing of how the page would appear. They use great programs such as PhotoShop, to deliver prototypes and create the final design.

When the design is complete, the graphics designer needs to break up the single image into small elements and code them as HTML. They try to convert things to HTML and CSS and use tables and DIVs to create the page structure. The graphics artist usually prefers to keep key elements in their original graphics form, so that they look exactly as intended - on every web browser and every PC.

So, you can see that graphics designers actually see it as converting graphics into text and not text into images. They start with an entire page as an image and gradually convert it to text.

What can you do?

The customer isn’t always right, but he’s always the customer. When you order web design work, you may not know what the best way is for doing things, but you can demand how certain things should be done. It doesn’t matter if the designer can do it prettier or even if you’re in full agreement - more important is that you know what to request.

• Don’t include any text in images. The only exception can be your logo and company/product name.
• Produce valid HTML (one that validates correctly at least using the w3 validator).
• Avoid heavy graphics (the total size of a health web page should not be more than 60Kbyte, including images and Javascript).

There’s other things that are important, but these three are essential an non-negotiable.