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

Storing Images in Files

Once image data have been processed and stored on a computer, a graphics designer needs a way of storing this information as a computer file. There are literally hundreds of image file formats for doing so, each with its own strengths and weaknesses. For the Web, the most important criterion is file size—the file must be as small as possible, so that it can be quickly transmitted over the Internet. For this reason, the image formats listed in the following sections are the only ones widely implemented in Web applications, with GIF and JPEG being the most popular choices.

Supported Image Formats

Although most browsers support a variety of different image formats, there are only four that are universally acceptable: the GIF (GIF87 and GIF89A), JPEG, X-Bitmap, and X-Pixelmap formats. The different types can usually be inferred by the filename suffix: GIF image files usually have the suffix .gif, JPEGs usually .jpg or .jpeg, X-Bitmaps usually .xbm, and X-Pixelmaps usually .xpm. A fifth format, PNG, for Portable Network Graphics (usually with extension .png), while gaining popularity, is not yet universally supported. The MIME types corresponding to these five formats are image/gif, image/jpeg, image/x-bitmap, image/x-pixelmap, and image/png, respectively.

Figure 3.1  An illustration of color dithering. The first figure (Original) illustrates the original color (a pale aquamarine), while the second figure (Dithered) shows the display of this color when dithered for a 256-color display. The third figure (expanded view) shows an expanded view of a dithered region, showing the individual pixels: The original color is dithered using a mixture of gray, white and aqua, which appear here as white and two shades of gray.

X-Bitmap/Pixelmap

X-Bitmaps are a common format on UNIX workstations and are often found in older image and icon libraries. An X-Bitmap assigns a single bit to each image pixel, and therefore supports only black-and-white images. Simple bitmaps are useful, however, as browsers treat the white portion as transparent—the black part of the image is displayed in black, while the white part is replaced by the color or image of the underlying background. This permits attractive black icons, since the surrounding white background is not visible. However, X-Bitmaps are inefficient at storing images and are uncommon outside the UNIX environment. As we shall see, GIF is a better choice.

X-Pixelmaps are similar to X-Bitmaps but assign 8 bits to each pixel, as opposed to 1, and can consequently support images with 256 distinct colors. However, like X-Bitmaps, X-Pixelmaps are an inefficient way to store an image. Again, it is better to use GIF—you get the same picture, but in a much smaller file.

GIF

GIF (an abbreviation for Graphics Interchange Format) is the most common image format in World Wide Web applications. This format can store black-and-white, grayscale, or color images, although it is limited to a maximum of 256 colors (or shades of gray) per image. Somewhat like the X-Pixelmap, the GIF format encodes the image information using a color indexing scheme. When you create a GIF image, the software uses an image analysis algorithm to find the set of 256 (or fewer) colors that best describe the color content of the raw image and creates a color table mapping these colors onto integers ranging from 0 to 255. The software then examines each pixel in the original image, finds the color in the color table that is closest to the actual color, and assigns the corresponding color index value to this pixel. The resulting GIF image file consists of an array of these color indices plus a color table that maps each of the 256 indices onto the chosen color.

The color table can be optimized for each image. For example, if a picture is of a red sunset, this table will contain mostly reds, whereas if it is a picture of a forest, it will be mostly greens. This technique can yield a quite successful rendering of the original image, even though there are at most 256 different colors. As mentioned previously, however, it is best for Web applications to use the Windows colormap for this color table whenever possible.

GIF stores the images in a compressed format. The compression algorithm is relatively simple: Basically, it looks for repeated sequences of the same color and encodes long sequences using a much shorter string. For example, if there were 50 pixels in a row with the same color (lets call this color “Q”), this might be encoded as:

QQQQQ . . . QQQQ   ==  50Q

That is, instead of having 50 Qs one after the other, the string is compressed into the color index plus a number indicating how many times the color repeats.

GIF compression works very well on images with large blocks of solid colors, such as logos and icons. The compression is not, however, efficient for photographic images, where there are no large single-color regions and the image is highly irregular. For this type of image, JPEG is a better choice.

There are two common versions of the GIF format—GIF87 and GIF89A—the latter having several important features not possible in GIF87. For example, GIF89A lets you make one of the colors transparent, so that the background shows through. This is equivalent to the transparency of X-Bitmap images. GIF89 also lets you place more than one image in a single GIF file; most Web browsers take this sequence of images and play them as a crude animation, known as an animated GIF. Both features are discussed in more detail later on.

JPEG

The JPEG (for Joint Photographic Experts Group) format was designed expressly for storing photographic images in a compact digital form. JPEG is an extremely sophisticated compressed image format that can support an almost infinite number of colors, instead of only 256. JPEG also supports a lossy image compression technique—the greater the compression, the poorer the quality of the stored image. In general, JPEG is far better than GIF at storing photographic images, both in terms of image quality and file size, while GIF is better for images containing few colors and/or that have large single-colored regions, such as buttons, logos, clip art, and so on. Also, JPEG does not support animated sequences nor image transparency.

Recently, the JPEG group introduced a variant of the JPEG format, known as progressive JPEG or P-JPEG. This format supports progressive rendering of images as the data arrives, similar to the “wiping in” of an interlaced GIF. This image format has its own MIME type, image/pjpeg. PJPEG is supported by most modern browsers.