This document discusses how images should be used, partly as regards to human communication in general, but mainly as regards to publishing on the World Wide Web. The key questions here are why and what rather than how.
The word image in this context refers to any graphical presentation such as a photograph, drawing, painting, or diagram.
Technical questions of implementing the use of images on the Web are discussed in author's Learning HTML 3.2 by Examples. See also section Images & icons in Style guide for online hypertext by Arnoud "Galactus" Engelfriet.
The very basic principles of using images are the following:
A very large number of published documents contain text only. They often look boring, and they are often written in obscure language, using mile-long sentences and cryptic technical terms, using one font only, perhaps even without headings. Such style, or lack of style, might be the one you are strongly expected to follow when writing eg scientific or technical reports, legal documents, or administrative papers. It is natural to think that such documents would benefit from a few illustrative images. (However, just adding illustration might be rather useless, if the text remains obscure and unstructured.)
It is too easy to go to the other extreme when trying to avoid the boring plain text syndrome. This is especially true on the Web, where it is relatively easy technically to add illustration, for instance by picking images from various existing collections. Many people seem to think that you can't have too many images. If they can't find a suitable image, they use an unsuitable one.
When people say that one image tells more than a thousand words, they tend to overlook the fact that what the image says might be true or false, relevant or off-topic, useful or disturbing, constructive or tasteless. (I won't bother to refute the saying by pointing out that there are images which say nothing. However, I cannot resist the temptation to remark that oddly enough the saying itself is expressed using words.)
Certainly the ability to use images is a huge improvement over older forms of communication via computers. This does not imply that any use of images is progress.
Publishing on the Web is very different from older methods of publication, and this has implications on the use of images, too. In particular, an author should make his documents viewable in a wide range of environments, without assuming that everyone sees them the same way.
Often young, eager Web authors use a large amount of large images, without even realizing that for other people to see them they must be transmitted along communication lines. This may involve a long chain of connections, some of which might be rather slow. (Authors who make graphically intensive pages often say that they make them for technologically advanced environments. Probably they don't regard e.g. new pocket-size devices with slow Internet access as progress?)
There are situations where it makes sense to be graphically intensive. But it is always wrong to be graphics-intensive with no good reason. For example, I do not mean that there should not be geographical maps or collections of pictures of products on the Web. They may certainly have a message to carry, a message which calls for graphics. On the other hand, using images which contain just some text in some fancy font is mostly stupid, especially if one doesn't even provide an ALT= attribute. The same applies to picture galleries which are not ordered in any way and are monolithic in the sense that you cannot see a picture without waiting a very large amount of other pictures to load.
When discussing the use of images on the Web, the advocates of the structuralist view often remark that people use different Web browsers, and they use them differently. There are text-only browsers, and there are people who, for some reason or another, turn automatic image loading off. Moreover, it is possible that a Web document is not presented in visible form at all but by a speech synthesizer, which can process text but not images.
Such remarks are valid and important, but there is an even more important point. People are different, and different people see the same image differently, even if their visual abilities are the same. Photographs, for example, may contain so many details that it is very unlikely that two persons notify the same details; and what you look at may determine what you really see, irrespective of what the image was intended to show.
Even simple graphic symbols can be seen very differently. They symbolize different things to different people. To take an important special case, if you use flags to symbolize languages, you make a fundamental mistake, since flags symbolize countries, not languages. Such a mistake may have important practical consequences. An annoyed reader is a half-lost reader. (So what should you use as symbols of languages? Why, their names. Words are symbols, too. Anyone who can read language X can reasonably be expected to recognized the name of X in X.)
In addition to seeing images differently, people prefer different images. This is not just a matter of personal taste. It could also be much more objective: it depends on what your reader is doing. If, for instance, your document tells about a particular species of plant, the reader might be looking for a photograph of the entire plant, or a photograph of its flower, or a microscope photograph of some tiny detail, or something else. And many people might, for good reasons sometimes, prefer a drawing to a photograph. Someone might wish to see a map indicating the area in which the plant occurs. Of course, some people might prefer not seeing any image at all; they might be seeking after descriptive verbal information.
Thus, be careful with images, and consider providing alternative images for different people when feasible. To take a simple example, if your Web document tells about a city, provide links to several different photos, with link texts that guide each reader to a photo that speaks to him, instead of creating a large page with lots of unrelated photos on it. (In the latter case, people easily decide not to wait for the page to be loaded; they go elsewhere and won't see a single photo of yours.)
The discussion above applies to text, too, to a large extent. But it is probably relatively easy to realize eg that you should have some important main text and secondary texts linked to it. For example, if writing a document about a computer program, you should not mix technical implementation details with general descriptions intended for people who consider buying the program or with usage instructions for normal users; instead you should create a well-organized web of interlinked documents so that the reader can select whatever issues are important to him. Similar considerations should be applied to images. Don't make them jump into your readers' faces; let your readers jump into the images.
As an introduction, let us consider a simple example. Suppose that I have heard of somebody having the name Vanamo and that I'd like to know where the name, as a word, comes from. If I can find a document which says that vanamo is the Finnish name of a plant species, I might be quite satisfied. The information which I need can quite well be expressed as text-only, very simply indeed. Suppose next that I'm actually a bit more curious: I'd like to know what kind of plant it is. Knowing that its scientific name is Linnaea borealis might not help me at all, and most probably even a long textual description of its properties, including all kinds of botanical facts, would not be satisfactory (unless, perhaps, I were professional botanist). An image, either a photo or a drawing, would be really indispensable if I wish to know whether I have ever seen such a plant - or just what it looks like. (Of course, I would prefer several good images to select from.)
There is a collection of documents on Nordic plants, Bilder ur Nordens Flora, and it contains a presentation of Linnaea borealis. The text is in Swedish, but there is a very good picture which shows what the plant looks like. The embedded picture is rather small - is is a good idea to avoid disturbing people who want to read the text - but it acts as a link to a much larger picture. This allows the user of a typical graphical Web browser to get the large picture shown in a separate window if desired. (The document is not perfect, though. For instance, the HTML construct used for embedding the image does not contain an ALT attribute, so if I look at the page with automatic image loading disabled, the page does not say what the image is about. In this very case I would probably guess right.)
In our example, a picture really says more than a thousand words. There are things for which visual presentation, if available and useable, is undoubtedly the best. Words can supplement information eg by suggesting what should especially be looked at in the picture, although this too might be more approriately be presented using visual tools, if available. Similarly, if one wants to give a thorough description of a plant species, one may consider telling its typical biotypes verbally or as pictures or both. In order to tell the geographical areas where it occurs, a picture (map) is a natural solution.
Generally speaking, the various purposes of using images can be classified at the coarsest level as follows: presenting essential information about the subject matter, and all other purposes.
Alan Flavell's Use of ALT texts in IMG divides images into the following classes:
The following classification is still finer, yet hopefully practical enough:
An image may well serve several communicative purposes described above. For example, "an image against boredom" might simultaneously convey relevant information or create some atmosphere.
How can a reader know which class an image belongs to? Maybe he can't. Maybe you should tell him, in some cases.
Usually it is best to write the text first, well-structured, then add images. That way you make the document "Lynx-friendly" without even trying. More generally speaking, the document will be readable and enjoyable without images, although a presentation with images might be even more enjoyable.
There are exceptions, of course. In particular, indispensable images are, by definition, an essential part of the document structure and must be taken into account from the very beginning. Thus, a key factor in designing good documents is to be able to recognize when an image is indispensable. If you can't do that, you may integrate non-essential images into the structure of a document or fail to provide an image for something that really needs to be illustrated graphically. These errors do not cancel out each other! Notice that it is easy to notice the latter kind of error as a reader, so asking someone interested in but not very familiar with the subject matter might help you spot such errors.
As regards to the amount of images, a good rule of thumb is the following: the more you have indispensable or supportive images, the less you should use images for other purposes. On the other hand, if you would otherwise have no images, you might consider putting some images just against boredom or for decoration, if you cannot find anything better. (Yes, I know that this document should have images. I'm still working on that.)
A decorative image should not make it more difficult for the message to get through. Nonfigurative decoration, pure ornaments, is often better than a photo or a drawing which might make the reader think about the subject matter of the decorative image, not that of the document. You may of course use images which are really related to your subject matter, but be careful with them, too. For instance, if a document deals with legal matters, it might be temptating to decorate it with paragraph signs (§) as images; but having seen an article of mine in a paper publication with such decoration as background, I think it was an efficient method of making the article displeasing to those people I wrote it for! (Additionally, it made the text less legible.)
Use of background images on Web pages is at best futile, at worst an obstacle to reading. For example, the colors used in the background might seriously conflict with the text color selected by the user, or it might otherwise mess things up. The popular style of using a background image to produce some ornament in the left margin simply wastes valuable screen space. If I paid a lot for the difference between 19" and 15", I don't like other people wasting my screen for what they regard as cool ornament or as giving "company look".
Images are often used because of their concreteness. It is very important to be concrete enough, illustrating abstract statements with examples. But you should remember that concreteness is not always a good thing in an uncomplicated manner. It might also mislead a lot by creating one-sided mental images.
For example, suppose a document tells about birds in general. If the only illustration is a photo of a sparrow in a natural environment, then it's fundamentally just one photo of one individual of one species, in one particular situation. Since people normally look at images first, a reader might actually get the impression that the document deals with gardening if the photo shows a sparrow in a garden! And even if the reader thinks it's really a photo of sparrow, then reads the text seeing that it discusses birds in general, he might well read the text with a mental image in his mind. But with a wrong mental image of all birds being sparrow-like. More suitable illustration for a general document on birds might be a collection of drawings about e.g. sparrow, crow, eagle, loon, humming-bird and ostrich. You may wish to compare the following (excellent) sites related to birds, the first using not a single bird picture on its main page and the second using photos of three very different birds:
The first one of the pages used to contain one particular bird image. It's hard to tell whether no images is better than a single image in cases like this.
The principle of being sufficiently versatile is especially important if the subject matter is unfamiliar to readers. By giving one-sided illustration you would be creating wrong mental images instead of just reinforcing them. For example, when describing a new kind of device, you should avoid using illustration which only illustrates one particular model of one particular product line of one particular company. (Even if your job is to help selling just those models, shouldn't you put there images of some other, inferior, models as well?)
Image captions should be used to alleviate the problems caused by images being too concrete. For instance, if the document tells about DVD technology, it should rarely have an image caption like DVD drive. Something like A DVD drive. XYZ-42, from Company, Inc. would be better, not so much because of the details it gives but because it suggests that this is one model and others might look quite different.
Images are an efficient method of affecting people's minds. People often regard images as reproductions of reality; we speak about photorealism as if photos presented reality in a simple, indisputable way. But it is very easy to lie with photos even if one doesn't technically manipulate a photo. For example, think about a photo which shows a worker leaning on a spade. Lazy, isn't he? But how can you know he isn't an exceptionally hard-working guy having his only short rest during a long day?
On the Web, the size of images is very important. (Size primarily refers to the size of the image file in bytes, which affects the transfer time, but also to the size in pixels, which consumes the readers screen space.) If, for example, the main page of a corporation has a lot of large images, it won't serve customers very well. A customer might be interested in the images when he visits the page for the first time, but he might get really annoyed when the umpteenth time comes and he occasionally uses a slow connection and just wanted to check a product catalog entry.
Please consider the following possibilities:
The more essential an image is in the document, the more important it is to take care of binding image and text together. If there is a logical connection between an image and a piece of text, e.g. the image illustrates a particular statement, then there should be physical association, too. It is frustrating to read text which discusses the same thing as a figure and has a figure between paragraphs of the text but that figure deals with the subject matter of the next section. That happens pretty often on printed media, but you can make it happen on the Web too, if you switch off your brain for a moment.
The association between a text and an image can be achieved in different ways. On the Web you can do something that can't be done on older media: you can make the text contain a link to the image (allowing the reader e.g. to open the image in another window and put it where he likes, when in some windowing environment). Using embedded images, you can put text and image alongside with each other or on top of each other. In the latter case you can put either the text before the image or vice versa but you should try to use the same style throughout a document (or a collection of documents).
I would especially warn against scattering images around so that text paragraphs which logically belong together have images between them. The images then break the logical structure.
On the Web, you cannot specify where an image is displayed. Even if you could reliably prescribe the coordinates of an image within a browser window, you cannot prevent a user from positioning the window on a screen where he wants.
Thus, in the Web context, positioning of images basically refers to logical positioning, such as whether an image appears before or after another image or a text paragraph or possibly alongside with it. (Notice that "before" does not necessarily mean "above". There are writing systems where "before" means "under".)
As regards to such positioning, I suggest the following rule of thumb:
The association of texts and images is often difficult, and particularly on printed media it can make layout design more time-consuming and the result might be esthetically suboptimal. However, for the communicative purpose such work is much more important than iterating on fine points of word usage or color subtleties or selecting an optimal font among marginally different alternatives. (Strangely, these are things on which many people work hard.)
When your Web document contains images, you should always give some thought to the question what happens on a browser which does not display images. The number of people using text-only browsers might be small, but they should not be ignored. Moreover, a relatively large number of people use graphical browsers with automatic loading of images disabled. (This is partly caused by common misuse of images.)
If possible, you should make your document readable (although perhaps not maximally enjoyable) without images, too. For most classes of images discussed above, this is strikingly simple if you just want to do that. For example, for a decorative image provide the attribute ALT="" in the IMG element. For an image which contains a logo of company Foobar, provide ALT="Foobar" if the logo appears in place of the company name (e.g. as a heading-like construct) ALT="" otherwise. But for supportive and indispensable images the question is more difficult. In most cases it is impossible to provide such ALT texts which act as replacements, so you should provide a short explanation of the image (what it illustrates and how). That would help a user who has automatic image loading disabled as well as a user who is casually using a text-only browser but has the ability to return to your page later with a graphical browser.
Sometimes the message of an image can be expressed verbally but not in so few words that it would make sense to put them into an ALT attribute. It might take several paragraphs, for example. In such a case you might accompany the image with a link to a separate document explaining the content of the image verbally. The verbal explanation might of course be useful to people who can see the image, too. (People are different. Some people prefer visual illustrations, some prefer textual explanations, and some might even prefer formulas and exact formal language. And even a visually oriented person might fail to understand some component of the image, yet "see" the message when reading the corresponding textual explanation.)
If your document contains indispensable images, it might be wise to warn about this at the very beginning. You should give the warning politely instead of stupidities like Download Netscape 5.0 NOW!. And you should not exaggerate. If only one section of your document has an indispensable image, tell that in some simple words, instead of telling some people go away.
Several people have adopted the style of presenting menus with text images as in the following:
This may look more impressive than the presentation using a simple list of links (UL element in HTML):
However, notice first that the information is anyway in text form;
if you don't know
Finnish,
you won't benefit from either of the above
presentations. Presenting text as image wastes bandwidth, and it forces
the text to be presented in a specific font and size (which may please
the author, but readers may disagree). If the document is a frequently
accessed index page, it can frustrating to wait for the images to load
just to be able to navigate further.
- If you include
text images, make sure they have corresponding alt texts.
Besides, if desired, a simple list of textual links could be styled using CSS. The following example consists of the same simple menu as above but with a style sheet that might make it appear visually in a manner similar to the image approach:
Normally a linear menu, implemented as a simple list, is quite satisfactory. If the list is so large that it is inconvenient, you should consider restructuring your documents so that menus have a reasonable amount of entries. The "rule of seven" is usually a good rule of thumb: at each level, provide at most seven alternatives. (You may wish to consider a menu consisting of a list of at most seven items, each of which contains a sublist of at most seven items. Not all people like that, but it is definitely better than an unsorted unstructured list containing dozens of items.)
In general, present items of a menu as text, not as images. There are exceptional situations where an image can uniquely and easily indicate what an item stands for. You might consider using an image (the Red Cross symbol) to denote first-aid station; but make sure that the use then complies with the rules on using the Red Cross! (See the ICRC Web site for information on this.) A user may perceive a common symbol faster than some text (but notice that you may still lose in total time, since an image loads slower). Moreover, an image can overcome language barriers. (But notice that the item probably leads to verbal information anyway, so this may not be so important.)
However, images can be ambiguous or misleading or even offensive. In fact, as authors we may have more difficulties in realizing that images are culture dependent than remembering that words are. (The Red Cross is not a universal symbol; should you include the Red Crescent as well? And any symbol for "first aid" might be seen as a symbol of medical first aid by many people, while others might see it as a symbol for getting help in the usage of a computer program or in navigating a Web site!)
Very often organizations make their main Web page impressive, looking like bombastic façade. This typically means that they contain a lot of large images which make access to the pages slow even with fast connections. Such façades abound on the Web, and I refrain from mentioning any particular horror story. The point is that even a façade page is impressive when visited for the first time, it is a nuisance to people who really want to get at some real information frequently. So should a façade offend regular customers?
A natural solution to the façade problem is to provide another page which acts as a practical index (contents) page which should contain essentially just well-structured lists of links to relevant information. You might even provide different index pages for various purposes and visitors. A university might provide, in addition to a façade page, an index page for its students, another for the staff, yet another for people at other universities or other parties interested in cooperation. (One can think about many other possible index pages, but there are practical limitations on how many useful things you can do, even if you avoid wasting time with useless things.) And a company might have one index page for normal customers, one for large customers, one for people looking for a job, one for stockholders, and so on. In any case the façade page should have links to the practical pages and these in turn should be linked together (possibly via the façade page).