Visual Elements and Graphics - Web Development and Design Foundations with XHTML - page 129

ImageReady. Shareware GIF animation applications such as the GIF Construction Set
are also commonly used. There are advantages to using an animated GIF to add action
to your Web page. This format is widely supported, does not require a browser plug-in,
and is relatively easy to create.

When you decide to add an animated GIF to your Web page, try to use the image for
special emphasis only. If you're like most people, at some time you have been annoyed
by a flashing ad banner at the top of a Web page. Use animated gifs sparingly.
Compression. When a GIF file is saved, lossless compression is used. This means that
nothing in the original image is lost and that the compressed image, when rendered by a
browser, will contain the same pixels as the original.
Optimization. To avoid slow-loading Web pages, graphic files should be optimized for
the Web. Image optimization is the process of creating an image with the lowest file size
that still renders a good quality image—balancing image quality and file size. GIF
images are typically optimized by reducing the number of colors in the image. The
image shown in Figure 4.6 was created using 235 colors and is 12KB in size. A graphics
application such as Adobe Photoshop can be used to optimize the image for the Web—
reducing the number of colors, which decreases the file size. The image shown in
Figure 4.7 uses only eight colors and has a file size less than 5KB. However, the image
quality is unacceptable.

Figure 4.7
This GIF image is
less than 5KB but is
poor quality

Go to the end of the
book for a full color
version of this figure

Figure 4.8 shows the optimized image with acceptable quality using 128 colors and a
file size of 10KB—the best balancing of quality and file size for this particular image.

Figure 4.8
Optimization is a
trade-off between
file size and image
quality

Go to the end of the
book for a full color
version of this figure

Interlacing. When a GIF graphic file is created it can be configured as interlaced. This
changes the way that browsers render the image. Remember that browsers display stan-
dard (noninterlaced) images as the file is read from top to bottom and only begin to dis-
play the image after 50 percent of the file has been downloaded by a browser. An
interlaced image progressively displays and seems to fade in as it downloads. The image
first appears fuzzy but gradually becomes clearer and sharper. Interlaced images are
repeatedly scanned from left to right. The first time about 13 percent of the image is
displayed. The next pass renders about 25 percent. This process continues until the
image is completely displayed. When you are using complex GIF images, consider inter-
lacing to improve the perceived load time of your page.