You currently can use only three image file formats in the Web Site Design: GIF, JPG, and PNG. These formats all compress images to create smaller files. Knowing which file format to use for which type of images is important. If you choose the wrong file type, your image will not compress or appear as you expect. Color depth (described in the “Color Basics” section of this chapter) is a factor in image file format as well. Of the three Web-based image file formats, JPG supports 24-bit color, GIF supports 8-bit color, and PNG supports both 8-bit and 24-bit color. The file format’s color depth controls the number of colors that can be displayed.
The Graphics Interchange Format (GIF) is San Francisco Web design for online delivery of graphics. GIF uses a lossless compression technique, meaning that no color information is discarded when the image is compressed.
The color depth of GIF is 8-bit, allowing a palette of no more than 256 colors. In fact, the fewer colors you use, the greater the compression, which results in smaller file size. The GIF file format excels at compressing and displaying flat color areas, making it the logical choice for line art and color graphics. Because of its limited color depth, GIF is not the best file format for photographs or more complex graphics that have gradations of color, such as shadows and feathering.
With GIF files you can choose one color in an image to appear as transparent in the browser. The background color or pattern will show through the areas that you have designated as transparent. Using transparent areas allows you to create graphics that appear to have an irregular outside shape, rather than being bounded by a rectangle.
You can create transparent areas using a graphics editor. When you choose the transparent color, all pixels of that color in the image will let the background color show through.
The GIF format lets you store multiple images and timing information about the images in a single file. The means that you can build animations consisting of multiple static images that play continuously, creating the illusion of motion. This is exactly the same technique used in cell-based animation. You can create animated GIFs with a variety of both shareware and commercial software.
GIF animation is somewhat limited when compared to the results of other proprietary animation tools such as Macromedia Shockwave or Flash, which can play synchronized sounds and allow Web users to interact with the animation. Creating animations with these applications, however, requires browser plug-ins, and viewing the animations demands heavy download times. Unlike most proprietary tools, you do not need any special plug-ins to view animated GIFs, and, if you limit color and motion when creating your animations, you can keep your file sizes small for faster downloads.
Use restraint when adding animated GIFs, such as blinking icons and scrolling banners, to your pages. Users may find them annoying because they are repetitive and distract from the page content. Consider choosing to play an animation only a certain number of times rather than letting them loop endlessly.