Optimizing Graphics for the WWW

There have been many discussions about graphics and the World Wide Web (WWW). There are several different popular formats, and advantages and disadvantages to all of them.

by Jonathan Gross

There are two main contenders for graphic file formats for people working with the WWW. GIF (Graphics Interchange Format), pronounced, well, ``giff'' with a hard g or ``jiff'' with a soft g, and JPEG (Joint Photographic Experts Group), pronounced ``jay-peg''. These types of graphics are complementary and should be used in different circumstances for different applications; however, there is some confusion about which format is appropriate for what type of image.

A third possibility is PNG (Portable Network Graphic), pronounced ``ping''. The GIF file format fell into disfavor around January 1995 when Unisys and Compuserve decided that programs implementing the GIF format would have to pay royalties, since GIF uses LZW compression, a proprietary algorithm. Subsequent discussions and development took place with Compuserve and several Internet-based committees already working on an alternative to GIF which resulted in the rapid conclusion to specifications for the new format. PNG is also known as ``PNG's Not GIF'' (which may seem familiar to those of you who use any of the GNU tools...) See the side-bar for more information on PNG.

GIF is still the most widely used graphic format in use, and is supported by virtually all browsers. It is lossless, which means that after decompression, the image that you have is the same as the original. The main advantage of this is that you can make exact replicas of images. The disadvantage is that the replicas are as large as the original image. The alternative is to have a lossy decompression, which means that you can have slightly degraded (although you may not be able to see it) images that have smaller file sizes. Smaller file sizes result in faster transfer times, and faster loading pages.

JPEG is actually a set of compression algorithms, not technically a file format. The Internet being what it is, several different developers have gone ahead with the algorithms, and created several different file formats for JPEG. The closest there is to a ``standard JPEG'' is the result of some work done by the people at C-Cube Microsystems. They defined two different JPEG formats: JFIF for ``low-end'' images (pixel information only), and TIFF/JPEG (or TIFF 6.0), a ``high-end'' format that records everything you ever wanted to know about an image and then some. But for our concerns, we need only deal with JFIF, which has become (as much as things ever do on the Internet) the standard JPEG. ``Okay,'' you may be saying to yourself, ``so what is JPEG good for?''

In a nutshell, JPEG will store photograph type images at compression ratios of 10:1-20:1 (as opposed to GIFs where it is usually 2:1).

The JPEG standard is suited for ``realistic'' scenes, be they complex ray-tracings, photographs, ``fantasy drawings'' or other images where color boundaries are not sharply defined. JPEG is designed to exploit known limitations of the eye, especially the fact that small changes in color are perceived less accurately than small changes in brightness (photos for example, but not line drawings or logos). It uses a lossy compression method--JPEG is best suited for true-color original images; converting a GIF of a photograph into JPEG format will not always produce satisfactory results.

JPEG allows adjustments to the amount of information lost. This means that you can create very small files with low quality, or larger files with higher quality, depending on the application that your image is to serve. This is a useful feature for creating faster loading pages where perfect image quality may not be essential.

A caveat for working with JPEG is that it loses quality for successive compressions and decompressions. If you need to crop, resize or manipulate your JPEG images, you will lose image quality each time you make a change. If you must work with JPEG images, the best thing you can do is to crop from the top and left by increments of 16 pixels. JPEG processes images in small blocks, and using a block boundary like this will mean that most of the other boundaries will stay the same.

If you are converting GIF to JPEG, eliminate any borders that have been placed around the GIF. These take up lots of space in JPEG format. During translation, use the ``smooth'' tool to smooth the dithering that the GIF uses into something that is more acceptable to JPEG. If the GIF is badly dithered, then you are probably better of leaving it as a GIF. If you have to do a reasonable amount of manipulation, it is best to do it in a lossless format (TIFF, RLE, PPM, etc), and only use JPEG for storage and archival. JPEG is supported by most browsers.

PNG and GIF are suitable for sharp line drawings, cartoons, simple color schemes (a 3 or 4 color palette) or diagrams. GIF is almost universally supported (which may be one of the reasons it's so commonly used...vicious circle, isn't it?), however it only supports 256 colors. PNG is still being incorporated, and is only available on a smattering of browsers as of this writing, however, it is a vast improvement over GIF. Both formats are lossless.

So How Do I Optimize These?

GIFs can be optimized in several ways. One method involves putting smaller versions of the GIFs in as place-holders for the larger versions of the image, with information about the size of the larger one. This gives the viewer an option about whether it's worth waiting for the large version. These smaller images are usually called ``thumbnail'' images, and the polite thing to do is put the size of the larger images below it. The seaotter pictures are an example.

Another method is to interlace your GIFs. Interlacing produces a ``layering effect'' so that a grainy version of the image is sent first, and on subsequent passes is ``resolved'' into the final image. This process allows people to get an idea of what the image contains before it is fully loaded. For Unix machines, the netpbm package allows you to interlace gifs with the -interlace option. For other platforms, Photoshop has an interlace option, as do most other major graphics packages.

Each of these images are about 178K.

Another neat trick that works with GIFs is to make portions of them transparent. There are tools for this on the Internet as well, but the basic idea is to find one color (perhaps the red in a stop sign), and flag it as transparent. Then, when the image is loaded, it will appear as if the words STOP were floating all alone against the background of the browser. This is especially effective for things like logos, symbols and stylized text. There are tools for this at many Internet archive sites. One of the most common for Unix machines is the netpbm package, available at many ftp archives. Get it, compile it on your platform (there are Makefiles for lots of different platforms), and then do something like this:

$ giftopnm foo.gif > foo.ppm
$ ppmtogif -transparent #rgb foo.ppm > foo-trans.gif

If you are preparing images using Photoshop, then are a couple of intermediate steps that you need to take. The first step is to retrieve the GIF89a export plug-in from http://www.adobe.com/Software.html and install it. Once that is done, save the image as a GIF. You will be prompted for a transparency, and told to choose a color. In the same window as you found the transparency option, there will be a check-box that you can select for interlacing your GIF. Make sure this is checked when you go to finally save your image.

The same optimizations that can be done for GIFs can be done for PNGs, including interlacing, transparency, and thumbnail images.

JPEG is a little easier to optimize. Using some format other than JPEG, manipulate the image until it looks about the way you want it to look in its final form. Convert it to JPEG, and save successive images at varying degrees of quality, and load them into your browser. At some point in the succession there will be a good balance between the time it takes to load, and the quality of the image. Use this as the image on your page.

Optimizations such as these will help streamline your pages, make them more user-friendly, and faster loading. A large portion of the people viewing your pages will be doing so over a 28.8K or slower connection, and the faster it loads, the more people will see it.

Jonathan is the editor of WEBsmith and spends as much time as possible in his wetsuit emulating sea otters. He can be reached via e-mail at jong@seaotter.com. Really