HTML 4.0 Sourcebook
(Publisher: John Wiley & Sons, Inc.)
Author(s): Ian S. Graham
ISBN: 0471257249
Publication Date: 04/01/98

Chapter 3
Graphics and Images in HTML Documents

Inline images are one of the most appealing features of HTML, allowing the communication of important graphical information, as well as documents with colorful visual appeal. Images can be used in many contexts: as iconic buttons, as imagemaps, or purely as decorations. And they look so easy, you are probably itching to make some yourself.

However, the Web imposes important limitations on inline images that must be taken into account by any Web author who wants to design effective, usable documents. What are these limitations? First is bandwidth, or the speed at which data is sent from your server to a user’s browser. As this is usually low, you must strive to keep image files small so that they are quick to download. Second is computer display quality. Readers will be using many different types of computers, with varied qualities of color monitors and graphics cards. You must design your images to look good on a variety of displays. Third, you must be sure to use image formats that are widely supported. There is no point in including an image if few browsers can display it. Finally, you must make allowances for users who do not see the images, either because they are using a text-only browser or because they have disabled image loading.

This chapter provides an overview of image use within HTML documents, taking into account these four important factors. The beginning of the chapter is a review of the IMG element—the element used to include images in a document. The remainder looks at some of the details of image preparation and processing, beginning with a brief introduction to computer graphics, followed by a description of the image file formats supported on the Web. Watch for the section that discusses basic image processing tricks and tools, and some of the particular features of some of the supported image formats, such as transparency and animated GIFs. This is followed by an overview of active images and imagemaps. Finally, the chapter concludes with a list of useful image icon archive sites and a list of references.

Including Images in HTML Documents

As discussed in Chapters 1 and 2, images are included via the IMG element. All IMG elements should minimally have the following attributes:

<IMG SRC=“image-url” HEIGHT=“y_pixels” WIDTH=“x_pixels”
     ALT=“text alternative”>

Here, image-url is the URL pointing to the image file, y_pixels is the height of the image in pixels, and x_pixels is the width of the image, also in pixels. By including the size of the image in the HTML markup, a browser can begin formatting the document before the image arrives, as it knows how much space to set aside on the display for the image. The string text alternative is a text description of—or alternative to—the image, used by browsers that do not display the pictures. Also, most newer graphical browsers display this as a text “pop-up” on top of the image (see Figure 1.18). You should always have ALT values to explain a picture’s meaning; if it is purely decorative and has no meaning, you can use ALT=“” (i.e., assign an empty string to ALT) to indicate this fact.

Web Graphics Introduction

When designing Web graphics, a designer must be aware of the types of displays used by the users. These will vary from low resolution 640×480 pixel displays capable of at most 256 colors, to high resolution 1280×1024 displays capable of displaying full 24-bit (2²⁴ =16.8 million) color. Unfortunately, the majority of users fall closer to the bottom of this range than the top, so a Web graphics designer must prepare pages that display well on low-resolution displays with a limited color palette.

The size constraint implies the need for small graphics to fit on the display. For example, a page banner should be no more than 570 pixels wide and less than 100 pixels high. Similarly, the raw images must be designed using a limited color palette, so that the browser does not “run out” of colors while trying to display multiple images. However, understanding how to work within these limitations requires a basic knowledge of computer graphics and of a computer’s representation of colors. This, coincidentally, is the subject of this section.

Color Representations—The RGB System

The science and technology of color is actually very complicated—far more complicated than you are likely to want to understand! Fortunately, for basic graphics work, a Web developer need only understand a few details, the most important of which is the RGB color system.

On a computer, colors are usually defined using what are called RGB (Red-Green-Blue) codes. This coding scheme expresses a color as a mixture of the primary colors red, green, and blue, with the intensity of each color ranging from 0 (no intensity) to 255 (as bright as possible). As a result, the strength of each primary color can be expressed in a single byte (8 bits), so that any color can be expressed as a 24-bit sequence containing the intensity of the red, green, and blue components. This is why very high-resolution color displays are called 24-bit color graphics systems.

RGB codes are usually expressed as numbers in the hexadecimal numbering system. In this system, a complete color specification looks like

RRGGBB

where RR is the hex code for the red intensity (ranging from 00 to FF), GG is the hex code for the Green intensity (ranging from 00 to FF ), and BB is the hex code for the blue intensity (you get the idea). For example, the code 000000 corresponds to black, FFFFFF corresponds to white (as bright as possible), and AAAAAA corresponds to a rather light shade of gray.

Limited Numbers of Colors—The Colormap

To display true, full-color images on a display, a computer must have 24 bits of memory for each pixel on the screen (this is what is meant by the phrase “24-bit color”). However, most computers do not have this many bits per pixel—many, in fact, have only 8 bits per pixel and support what is known as 8-bit color. In this case, a pixel can display at most 256 different colors, a far cry from the millions that are possible with 24 bits.