HTML and CSS Reference
In-Depth Information
As I just mentioned, three image formats are supported by every major web browser:
GIF, JPEG, and PNG. JPEG and GIF are the old standbys, each useful for different pur-
poses. PNG was designed as a replacement for the GIF format, which was necessary
after Unisys invoked its patent rights on the GIF format. (The patent has since expired.)
To design web pages, you must understand and apply both image formats and decide
which is appropriate to use in each case.
GIF
Graphics Interchange Format
, also known as GIF or CompuServe GIF, was once the
most widely used image format. It was developed by CompuServe to fill the need for a
cross-platform image format.
9
NOTE
GIF is pronounced
jiff
, like the peanut butter, not with a hard
G
as
in
gift
. Really—the early documentation of GIF tools says so.
The GIF format is actually two similar image formats: GIF87, the original format, and
GIF89a, which has enhancements for transparency, interlacing, and multiframe GIF
images that you can use for simple animations.
The GIF format is okay for logos, icons, line art, and other simple images. It doesn't
work as well for highly detailed images because it's limited to only 256 colors. For
example, photographs in GIF format tend to look grainy and blotchy. The problem is
that with the limited color palette, it's hard to create smooth color transitions.
JPEG
JPEG, which stands for
Joint Photographic Experts Group
(the group that developed it),
is the other popular format for images on the Web. JPEG (pronounced
jay-peg
) is actu-
ally a compression type that other file formats can use. The file format for which it's
known is also commonly called JPEG.
JPEG was designed for the storage of photographic images. Unlike GIF images, JPEG
images can include any number of colors. The style of compression that JPEG uses (the
compression algorithm) works especially well for photographs, so files compressed using
the JPEG algorithm are considerably smaller than those compressed using GIF. JPEG
uses a
lossy
compression algorithm, which means that some of the data used in the image
