Graphics File Formats for Your Web Page
By Stephen Bucaro
Displaying pictures or graphics or on your web page can make it more interesting, illustrate the
explanation of concepts, and increase your web page's search rank. Images that you put on your
web page must be transferred from a Web server, across the Internet, to your Web page visitors
computer. The original uncompressed image is referred to as RAW. To keep the transfer delays short,
there are several different graphic file formats that use compression techniques to reduce the size of files.
Which image file format to use, GIF, JPEG, or PNG depends upon the character of the image you
want to convert. If the image contains blocks of solid color, use the GIF format. Using the
complex JPEG or PNG compression method on an image that contains large blocks of solid color
would actually result in a larger file than would the GIF format. If the image contains lots
of detail, like a photograph, use the JPEG or PNG format.
GIF (Graphics Interchange Format)
The Graphics Interchange Format (GIF) was developed by CompuServe. A GIF image can contain up
to 256 different colors. The GIF image format works well because most simple Web graphics
contain less than 256 different colors. When you convert an image to the GIF format, if the
image contains more than 256 different colors, some color information will be lost.
In the early days when computer memory was scarce, monitors always used a palette. Unfortunately
all computer manufacturers did not use the same palette. For example Apple computers palette
did not contain the same 256 colors that the Windows computers palette used. The Browser Safe
Palette contains a set of 216 colors that display correctly on all systems. To make sure that
your GIF images displayed with the correct colors on all systems, your image would need to
contain only the colors in the browser safe palette. Today most people have computers with
monitors capable of displaying true color, which means they can display over 17 million
The GIF format gives you the interlaced option. An interlaced image first appears on your
Web page in low resolution. This allows it to display quickly, although at low resolution. It
then displays with progressively higher resolution. This option is not commonly used because,
although the low resolution image displays quickly, the entire image takes longer to display
than a non-interlaced image.
The GIF format provides you with some features that you can't get with the more advanced JPEG
format. For example, you can choose a color to be transparent so that the background of your
web page shows though parts of your image. Also, the GIF format gives you the option to store
multiple images in a single file. You can set the time interval between images as they display
in sequence. You can use this feature to create a nice little animation.
In 1995 Unisys surprised Compuserve and the Internet community by announcing that they held a
patent on the Lempel-Ziv-Welch (LZW) compression technique used in the GIF file format. Anyone
wishing to use the LZW technique would have to pay Unisys a $0.20 per unit royalty. In response
to this, the Portable Network Graphics (PNG) format was developed. The PNG format was placed
in the public domain so that no-one is required to pay royalties to use it.
Note: As a Web graphics user or designer you do not have to pay royalties to Unisys in order to
use the GIF format. The royalties apply mainly to software developers who use the LZW compression
algorithm in the code of their graphics applications.
JPG (Joint Photographic Experts Group)
A GIF image can contain up to 256 different colors. Complex images such as photographs can
contain millions of different colors. Converting a photograph to GIF format may degrade the
image's appearance. The Joint Photographic Experts Group (JPEG) format uses a compression method
that is more suitable for photographic images.
When you convert an image to the JPEG format, you must select a compression level, sometimes
referred to as the quality. A lower compression level results in a higher quality image,
but the file size is not reduced as much. A high compression level results in a smaller file
size, but the image quality is poorer.