Teach Yourself Web Publishing with HTML 4 in 21 Days

Chapter 8: Creating Images for the Web




This chapter discusses more concepts about graphics in web documents, including theories of color. The objectives important to this chapter are:

  • common image formats
  • color models
  • image compression
  • creating images

Ms. Lemay begins by reviewing in depth the GIF and JPEG image formats.

There are actually several variations of GIF around now. All are compressed formats. They are common and useful, but limited to only 256 colors in each image. The original format, called GIF87, is for static images. The GIF89a format, on the other hand allows us to use:

  • interlacing - loading a blurry image first, then clarifying it
  • transparency - using a background that is transparent
  • animation - simulating motion with a sequence of images, like a cartoon

GIF files are well suited for images without fine detail, a controlled number of colors, and sharp edges show up well in them.

JPEG files are best for photographs because they can contain as many colors as necessary. The compression method used in JPEG files is not as good for simple images like line art and large areas of the same color.

There are several models, or methods, of explaining the human perception of color. Ms. Lemay discusses two:

  1. HSB - Hue, Saturation, and Brightness
  2. RGB - Red, Green, Blue
Colors can be codified, assigned numeric values, on each of three scales in both models. In HSB, a color is described as being of a certain Hue (the shade, or tint of the color, numbered from 0 to 360), a certain Brightness (a measurement of light and dark, numbered from 0 to 100) and a certain Saturation (the purity of the color, numbered from 0 to 100).

In the RGB model, a color is described as having a value from 0 to 255 for each component: Red, Green, and Blue. This system is a bit easier to grasp, since all three scales use the same numeric range, and you can easily demonstrate the combinations on a computer monitor. Colors are often specified with the RGB model for web pages. This is best explained by the fact that color monitors are said to have three electron "guns" in them, which are Red, Green, and Blue. Actual colors are created by "firing" these guns in combination at each pixel on the screen.

A color map is like a list of all the distinct colors used in an image. Just because a GIF file can have 256 colors in it, does not mean that you have to use that many. The fewer colors actually used in an image, the smaller the file can be. A good image processing program can optimize the color map of a GIF image, allowing the author of the image to tinker with the components of it until a balance is reached between the conflicting goals of small size and maximum detail.

File compression is another way to decrease the size of an image file. (The smaller the file, the faster it comes over the wire.) Since GIF files and JPEG files use different compression methods the only true measure of which is better for a complicated image is to try both and see.

Transparency means that a GIF file has an image in it that can be seen, but the background of the image is transparent, so the color or background of your page shows through.

Interlacing means that a GIF file is divided into numbered lines, shown in the diagram on page 227. In this example, there are 14 lines of pixels in the picture. The scanner or art program saves this file in a line-skipping method. First lines 1 and 9 are saved, then lines 5 and 13, then lines 3, 7, and 11, then the rest of the lines. When the file is displayed by the browser, the lines are painted on the screen in the order in which they were saved. This means that the image starts out fuzzy and gets clearer as each new series of lines are shown. The viewer gets an overall feel for the image before it is all downloaded and can decide to abort it if uninterested.

Animation is discussed in the next chapter. The basic idea is that a GIF file can actually be a series of small files that make up an animated cartoon sequence. These small files are referred to as frames of that animated GIF.

Laura cites a legal complication regarding GIF files. The GIF format uses a compression method called LZW, which is owned by the UNISYS company. UNISYS has asked all persons using GIFs to pay them a royalty. This has never gone anywhere, but it is possible that it will eventually kill interest in the GIF format.