Image Preliminaries

---

Before discussing image use in HTML/XHTML, it is important to discuss what image formats are supported on the Web today. In general, Web-based images come in two basic flavors: GIF (Graphics Interchange Format), as designated by the .gif extension, and JPEG (Joint Photographic Experts Group), as indicated by the .jpg or .jpeg file extension. A third format, PNG (Portable Network Graphics), as indicated by the .png file extension, is slowly gaining ground as a Web format and is supported fairly well in modern browsers. Table 5-1 details the supported image types found in most browsers. While browsers may support other image types, page authors should use only GIF or JPEG images to ensure that all users can see them.

Table 5-1: Selected Web Image File Types

File Type	File Extension
GIF (Graphics Interchange Format)	.gif
JPEG (Joint Photographic Experts Group)	.jpg or .jpeg
XBM (X Bitmaps)	.xbm
XPM (X Pixelmaps)	.xpm
PNG (Portable Network Graphics)	.png

Note  

Internet Explorer and many other Windows browsers support the bitmap (BMP) file type popular with Windows users. This format has not been widely adopted on the Web.

Choosing the correct image for the job is an important part of Web design. In general, GIF images tend to be good for illustrations such as logos or cartoons whereas JPEG images usually are the choice for complex imagery such as photographs. The main concerns for site designers when considering an image format are the size of the file itself and the quality of the reproduction. Table 5-2 provides a concise summary of the qualities of each format.

Table 5-2: Web Image Format Overview

Format	Compression Scheme	Color Depth Supported	Progressive or Interlaced Rendering	Transparency	Animation
GIF	Lossless ( preserves file size for minimal compression of continuous horizontal regions of color)	8-bit (256 colors)	Interlaced	Yes (1 degree)	Yes
JPEG	Lossy (trade image quality for file size)	24-bit (millions of colors)	Progressive	No	No

Subsequent sections will explain each of these basic features of the two main image formats in slightly more detail.

GIF Images

GIF is the most widely supported image format on the Web. Originally introduced by CompuServe (and occasionally described as CompuServe GIFs), there are actually two types of GIF: GIF 87 and GIF 89a . Both forms of GIF support 8-bit color (256 colors), use the LZW (Lempel-Ziv-Welch) lossless compression scheme, and generally have the .gif file extension. GIF 89a also supports transparency and animation, both of which will be discussed later in this section. Today, when speaking of GIF images, we always assume the GIF89a format is in use and make no distinction between the formats, regardless of whether or not animation or transparency is actually used in the image.

GIF images use a basic form of compression called run-length encoding . This lossless compression works well with large areas of continuous color. Figure 5-1 shows the GIF compression scheme in practice. Notice how the test images with large horizontal continuous areas of color compress a great deal, while those with variation do not. As shown in the demo, simply taking a box filled with lines and rotating it 90 degrees shows how dramatic the compression effect can be. Given GIF's difficulty dealing with variability in images, it is obvious why the format is good for illustrations and other images that contain large amounts of continuous color.

Figure 5-1: GIF compression scheme comparison

As mentioned earlier, GIF images only support 8-bit color for a maximum of 256 colors within the image. Consequently, some degree of loss is inevitable when representing true- color images, such as photographs. Typically, when an image is remapped from a large number of colors to a smaller color palette, dithering occurs. The process of dithering attempts to create the desired color that is outside of the palette, by taking two or more colors from the palette and placing them in some sort of checkered or speckled pattern in an attempt to visually create the illusion of the original color.

Note  

There is a fairly esoteric use of GIF images that allows them to exceed the 256 color barrier by using more than one image block, each with its own color palette within the same GIF file. The so-called "true-color GIF" could provide for thousands of color support, but with a much larger file size. Those looking to exceed the 256 color limitation of GIF should look to JPEG or PNG files.

While having only an 8-bit color depth seems problematic , sometimes designers will further downward adjust the bit-depth of GIF files to reduce file size. In general, the higher the bit-depth in an image, the more colors and the greater amount of information required. It would make sense then, that if you can limit the number of colors as much as possible without reducing the quality of the image, you could create some extremely small files. The key to doing this is using just enough colors in the image to support what is there or what is reasonable to dither. Standard 8-bit GIFs will contain up to 256 colors, 7-bit up to 128 colors, 6-bit up to 64 colors, 5-bit up to 32 colors, and so on. Most graphics programs, such as Macromedia Fireworks or Adobe Photoshop with ImageReady, support color reduction directly on image save. Figure 5-2 shows an example of the file reduction possibilities using GIF color reduction.

Figure 5-2: Color Reduction is useful to reduce GIF file size.

Transparency

GIF images also support transparency . One bit of transparency is allowed, which means that one color can be set to be transparent. Transparency allows the background that an image is placed upon to show through, making a variety of complex effects possible.

GIF transparency is far from ideal. Given that only a single color can be made transparent, it can be difficult to avoid a halo effect when placing transparent GIF images on backgrounds, as shown here:

The main problem with 1-bit transparency is that anti-aliasing uses variable colors to blur the jagged edges of an image to smooth things out. Recall that everything that is displayed onscreen is made up of pixels and that pixels are square. It should therefore be obvious that creating an image that has rounded edges may pose some problems. Anti-aliasing allows us to create the illusion of rounded or smooth edges by partially filling the edge pixels in an attempt to blend the image into the background, as shown here:

There are a variety of solutions to the anti-aliasing transparency interaction problem. First, you could simply not anti-alias the image, but this can produce unwanted "jagginess" in the image. A second possibility might be to avoid setting the transparency image on a complex background, and instead prefill the image with the appropriate background. This approach is seamless and completely avoids any trace of a halo, but it limits what we can put images on top of. For this reason, designers often avoid transparency in conjunction with complex backgrounds where this effect might be difficult to accomplish.

Tip  

When using small text in a graphic, it is often a good idea to leave the text aliased. Anti-aliasing introduces an element of fuzziness , which may make smaller font sizes very difficult to read.

Interlacing

GIF images also support a feature called interlacing . Interlacing allows an image to load in a venetian-blind fashion rather than from top to bottom a line at a time. The interlacing effect allows a user to get an idea of what an image looks like before the entire image has downloaded, thus avoiding user frustration as images download. See Figure 5-3 for an example of interlacing.

Figure 5-3: Interlaced GIF images show the gist of an image quickly

The previsualization benefit of interlacing is very useful on the Web, where download speed is often an issue. While interlacing a GIF image is generally a good idea, occasionally it comes with a downside; interlaced images may be larger than non-interlaced images. It is a bad idea to use interlacing for images that have text on them because it's impossible for the text to be read easily until the download is complete.

Animation

Finally, the GIF format also supports animation. This works by stacking GIF after GIF to create the animation, in a manner similar to a flip book. The animation extension also allows timing and looping information to be added to the image. Most popular graphics programs, such as Fireworks, support animated GIFs. An example of the interface to control GIF animation in Fireworks is shown in Figure 5-4.

Figure 5-4: Animated GIFs provide only basic animation controls.

Animated GIFs provide one of the most popular ways to add simple animation to a Web page because nearly every browser supports them. Browsers that do not support the animated GIF format generally display the first frame of the animation in its place. Even though plug-ins or other browser facilities are not required, authors should not rush out to use animation on their pages. Excessive animation can be distracting for the user, and is often inefficient to download.

Because GIF animation is basically image after image, the file size is the total of all the images within the animation combined, which can result in a much larger image than the user is willing to wait for. Thus, it is very important to make sure that every frame of the animation is compressed as much as possible. One approach to combat file bloat is to optimize the image by replacing only the moving parts of an individual animation frame. This is often dubbed changing rectangles optimization. By replacing only the portion of the frame that is changing, you can use smaller images in some frames to help cut the file size down. Most of the GIF animating applications have a feature built in that will go through and optimize the images for you. This can result in a dramatic saving of file size, as shown in Figure 5-5.

Figure 5-5: Example of animated GIF frames and optimization

JPEG

The other common Web image format is JPEG, which is indicated by a filename ending with .jpg or .jpeg. JPEG, which stands for the Joint Photographic Experts Group ”the name of the committee that wrote the standard ”is a lossy image format designed for compressing photographic images that may contain thousands, or even millions, of colors or shades of gray. Because JPEG is a lossy image format, there is some trade-off between image quality and file size. However, the JPEG format stores high-quality 24-bit color images in a significantly smaller amount of space than GIF, thus saving precious disk space or download time on the Web. See Figure 5-6 for an example of the quality versus file size tradeoff with JPEGs. Notice the significant file size savings obtained by sacrificing a little quality.

Figure 5-6: JPEG file size and quality comparison

The trick with JPEG's lossy compression is that it focuses on slight smudging in areas of heavy detail that a viewer is unlikely to notice. However, in a situation where continuous color or text is used, JPEG's compression scheme may quickly become evident, as the artifacts introduced into the image will appear heavy in the flat color and text regions. It is possible to avoid this issue by selectively compressing portions of the image using an image manipulation program such as Fireworks or Photoshop.

While the JPEG format may compress photographic images well, it is not well suited to line drawings, flat color illustrations, or text. Notice the comparison between GIF and JPEG file sizes in Figure 5-7.

Figure 5-7: Comparison of GIF and JPEG files

From Figure 5-7, it would seem that choosing between GIF and JPEG is usually very straightforward; photos suggest JPEG and illustrations GIF. However, in certain instances developers may be willing to distort a photo to put it in GIF in order to use the format's features because the JPEG format does not support animation, or any form of transparency. Fortunately, JPEG images do support a similar feature to GIF interlacing in a format called progressive JPEG. Progressive JPEGs fade in from a low resolution to a high resolution, going from fuzzy to clear. Like interlaced GIFs though, progressive JPEG images are slightly larger than their nonprogressive counterparts.

Finally, some designers are aware of the fact that because JPEG images are heavily compressed, decompression time can occasionally be a factor. With today's more powerful computers and higher speed lines, the decompression time of a JPEG will not be as noticeable much of the time. However, if you make an extremely large dimension JPEG and compress it highly, you will notice a delay. Of course, if you used a GIF, you'd have a worse looking image that might be just as large.

PNG

The Portable Network Graphics (PNG) format is an emerging format that has all of the features of GIF in addition to several other features. The compression algorithm for PNG is not proprietary compared to GIFs, which use LZW (owned by Unisys). Some designers have worried about the potential problems stemming from Unisys patent claims on LZW compression, but so far this has been a nonissue. PNG's compression algorithm is also slightly better than GIF's, as shown in Figure 5-8, but this alone is probably not much of a reason to give up GIF images given the browser compatibility problems that still plague the PNG format. PNG also supports slightly improved interlacing.

Figure 5-8: PNG Compression vs. GIF Compression

PNG images break the 8-bit color barrier normally found in GIF images, but with the degree of compression available in PNGs today it would not make sense to favor PNG files over JPEGs, as shown here.

A significant plus for PNG images is the improved transparency possibilities. Rather than being limited to a single color for transparency masks, PNG files can use up to 256 colors in a mask, which lends itself to smooth transparent edges and shadow effects.

Another problem addressed by PNG is the apparent color shifting in images that are developed on a system with one Gamma or brightness value and shown on a system with different Gamma. Notice in Figure 5-9 how the images do not quite look the same at different Gamma values. PNG avoids this problem.

 
Figure 5-9: Different Gamma values can cause images to look different

Finally, PNG supports animation through its related MNG (Multiple-image Network Graphics) format, similar to what is provided in GIF animations.

With all these great features, one wonders why PNG is not more common online. The main reason is that the browser vendors still don't consistently support PNG images. Even when the image format is supported, many features such as transparency are not fully implemented. Still, few browsers except those based upon Mozilla and Macintosh Internet Explorer support PNG well enough to rely on the format, so Web designers are warned to avoid using PNGs unless browser sensing is utilized.

Other Image Formats

There are many image formats in addition to GIF, JPEG, and PNG that can be used on the Web. Vector formats such as Flash (with the file extension .swf) or Scalable Vector Graphics (SVG) are available, and image files may even use exotic compression technology such as fractal or wavelet compression. Most of the less common image formats require a helper application or plug-in to allow the image to be displayed. Unless you have a specific need, you probably should avoid special image types requiring browser add-ons; users may become frustrated by the work involved in obtaining the extra software.

For now, let's assume that a page designer simply has a Web-compatible image that needs to be placed into a Web page and requires the appropriate HTML syntax to do so.

---