Images on the Web:
To GIF or Not To GIF
...that is the delay most people see while loading images...
...you can control the tradeoff between image quality and size
by Virginia
Bruce
Team Web
Compression
When your web browser encounters a graphic image tag in the HTML stream, it heads back to the server and grabs the image file matching the name in the tag. The time it takes to go get, download and display that image is the delay most people see while loading images. There are a number of factors that affect this delay, but one of the main factors that the page creator can control is the size and format of the image itself.
In general, images transmitted over the web are compressed. The two main formats currently recognized by the majority of browsers are GIF and JPEG. These are the images that can be displayed by most browsers "inline" or as part of a page, without requiring an external viewer. Most compression methods, including GIF and JPEG, use a predictive method, in part, to accomplish compression. This considers only the changes from a reference pixel value rather than considering each pixel individually. For example, if pixel x is black, it would be predicted that the pixel next to it would also be black. If it is, no further information is needed. If the next pixel is other than black, only then is additional information recorded. Both formats also use LZW compression. 1
A good explanation of the two formats may be found on the W3 Website, written by Tim Berners-Lee (Web founder) at http://www.w3.org/pub/WWW/Graphics/
GIF, (pronounced jif2)
stands for Graphics Interchange Format and was originally developed
in 1987 by Compuserve, so it's also called Compuserve GIF. GIF depends
on using a limited color palette for part of its compression. GIF images
are 8-bit, 256 or fewer colors. The format is lossless, meaning that
the information it contains when you create it is what will remain when
it is transmitted, uncompressed and displayed on the user's monitor.
It uses a Color Map 3 to store and transmit color information.
JPEG stands for Joint Photographic Experts Group. It
is a compression scheme that uses up to six steps to create a fully
compressed image. The compression rate can be varied by several parameters,
so you can control the tradeoff between image quality and size. (A thorough
explanation of JPEG can be seen at gopher://bellona.cs.rice.edu/OR180178-271284-/SPIB/news/
comp.compression.research/1995.05 Look for Subject 75.) The image
remains a 24-bit (16-million color) image. It is a "lossy"
format, meaning that it loses information in the decompression process.
This format should not be used to store images, but is usually fine
for transmission and display.
When to Use What
Any image that is "photographic," whether it is an actual photograph or a detailed image with lots of continuous blends or variations in color, like a painting or computer-generated rendering, will look better compressed by JPEG. PhotoShop allows you to save in baseline JPEG format, with 10 levels of compression. Experiment with the setting options to determine the best tradeoff between quality and compression for each image.
Any image with sharp edges, only a few colors or one where the text must be readable and crisp will come out better/smaller as GIF. Often you can reduce a logo or icon to 8 or 16 colors, and this will make a very small file. And at this time you must use GIF if you want your image to appear transparent against the page background. GIF89a, the currently supported GIF format, allows both transparency and interlacing, which is the display of alternate rasters, allowing the image to "resolve in" rather than "windowshade in" which gives viewers something to look at as the image loads. Photoshop 4 allows you to export files directly as GIF89a. You can also use DeBabelizer, L-View Pro, Graphic Converter, or several other utilties to create GIF89a's.
Progressive JPEG
A newer graphic format supported by Netscape is Progressive JPEG. This format allows a JPEG image to "resolve in" in a similar fashion to GIF 89a (it looks better, however, without the square artifacts). However, be aware that only Netscape 3.x, Microsoft Explorer and a few other browsers support it. Browsers that don't support it simply show the "broken" graphic image and any alternate text. Most experts expect all browsers to support pJPEG eventually. Photoshop 4 lets you save as pJPEG. A good shootout between the two is at http://webreference.com/jpeg/ . (Web Reference is a good all-purpose site for WWW information.)
Footnotes
1. LZW - A sophisticated data compression
algorithm based on work done by Lempel-Ziv & Welch which has the
feature of very efficient one-pass encoding and decoding. This allows
the image to be decompressed and displayed at the same time. *Terry
Welch worked at Sperry Corp. when he did his work on LZW. Unisys, who
bought Sperry, began to enforce their patent rights to LZW in 1994.
For a while, it looked as though the web would have to stop using GIF-compressed
images, but things have been worked out since. Software developers intending
to use the LZW format need to obtain licensing and pay royalties to
Unisys. Everyone else can stop worrying.
2. The pronunciation of "GIF" is specified in the GIF specification to be "jif", as in "jiffy", rather then "gif", which most people seem to prefer. This does seem strange because the "G" is from the word "Graphics" and not "Jraphics". --from Graphics File Formats FAQ, Ohio State. (referenced page has diesappeared...)
3. Color Map - The list of definitions of each color used in a GIF image. These desired colors are converted to available colors through a table which is derived by assigning an incoming color index (from the image) to an output color index (of the hardware). While the color map definitions are specified in a GIF image, the output pixel colors will vary based on the hardware used and its ability to match the defined color.* This explains why an image might look great when you create it on your computer, but looks terrible on someone else's monitor.
*From the original specification for GIF, available at http://www.w3.org/pub/WWW/Graphics/GIF/spec-gif87.txt