A computer monitor is composed of numerous small dots, or pixels (picture elements).
Images are formed onscreen by setting the colors of particular pixels. An image format
describes the color and position information necessary to create an onscreen image.
There are two basic image format varieties: vector images and bitmapped images.
In its raw form, a bitmap or raster image is simply a collection of pixels of different
color values. Because of the large number of pixels and color information in an image,
raw bitmaps can be very large. An uncompressed bitmap image at 800 × 600 pixels
with 24 bits of color information would take up over 1MB (800 × 600 × 24 = 11,520,000
bits / 8 bits per byte = 1,440,000 bytes). Given their potential size, bitmapped image
formats almost always employ some form of compression. In general, there are two
forms of image compression: lossless and lossy. Lossless image compression means that
the compressed image is identical to the uncompressed image. Because all the data in
the image must be preserved, the degree of compression, and the corresponding savings,
is relatively minor. Lossy compression, on the other hand, does not preserve the image
exactly, but can provide much higher degrees of compression. With lossy compression,
the loss in image quality achieves a smaller byte count. Because the human eye may
barely notice the loss, the trade-off may be acceptable.
A vector image stores image information in a much different manner
describing
the image as a collection of mathematical curves, points, and colors. Given the compact
manner in which vector images are described, the format has the advantage of being
very small in file size. Because the image is created or rendered mathematically, it can
easily be scaled, in comparison to bitmap formats, which tend to become distorted
during size changes. With all their advantages, vector images do have tradeoffs. First,
a vector image must go through an extra step, called rendering, where the image is
calculated and drawn onscreen. This process does take some time compared to bitmap
images, which simply decompress and display. The difference between the two basic
image formats is shown next.
In most cases—those in which the image is rather simple—the render time for a
vector image is negligible. As the image becomes more complex, the rendering process
can take an increasingly significant amount of time. Remember that, at the end of the
day, everything must become a bitmap in order to be displayed onscreen. Vector
formats do a good job on illustrative-style graphics, text, and logos, while bitmaps
handle photographs well. Interestingly enough, many vector formats will import
bitmap images for textures, and vectors are often rasterized for inclusion in bitmap
images. Both types of formats have their merits and work well together.
While the HTML standard says nothing about what image formats can be used
on the Web, browsers tend to support the same image types. On the Web, the primary
bitmap image formats are GIF (Graphics Interchange Format) and JPEG (Joint
Photographic Experts Group). The PNG (Portable Network Graphics) format is
now finally gaining some ground, but it is so far not that prevalent online. Where
vector graphics are concerned, the Flash format is dominant on the Web, but the
W3C-endorsed SVG (Scalable Vector Graphics) format is gaining some ground. Other
image formats, such as the various UNIX-related formats like XBM (X Bitmaps) and
XPM (X Pixelmaps) and the Windows format (.BMP), are often supported native
by browsers, but are primarily of historical interest and are not to be used. Esoteric
formats, such as wavelet-based formats, will eventually emerge into the mainstream;
but at least for now, stick with the tried-and-true GIF and JPEG. We discuss the main
image formats and some of the important features directly
GIF images are the most widely supported image format on the Web. Originally
introduced by CompuServe (and occasionally referred to as “CompuServe GIFs”),
the GIF format actually comes in two types: 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 14-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 in 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.
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 a color that is
outside of the palette. It does this by taking two or more colors from the palette and
placing them in some sort of checkered or speckled pattern as a way of visually creating
the illusion of the original color.
Ensuring that the appropriate file format is used for the right types of images and
that flat or illustrative type images use Web safe colors will help reduce the amount of
dithering that takes place.
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. Recall that
the higher the bit-depth in an image, the more colors and the greater amount of
information required. It would make sense then that, by limiting 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