by Janette B.
Bradley
axsWave Software, Inc.™
This article appeared in the November issue of hc/interact, a publication of the Special Interest Group in Human Computer Interaction (SIG HCI), which is part of The American Society for Information Science. I write a regular column on Web GUI for this publication. If you are interested in joining, drop me a line and I'll send you the info.
Last month we talked about how to design your Web graphics to keep the image proportional on a wide range of monitors. This month I want to introduce some basic concepts concerning the GIF and JPEG graphics formats used on the Web, along with some guidelines about which one to use.
The most common graphic format on the Web is GIF (Graphic Interchange Format). The process of converting a file to GIF from formats such as TIFF, PICT, or BMP compresses the file. The GIF compression scheme is a "loss-less" scheme, so no information in the graphic is "lost" during the compression process. However, if you have a 24-bit graphic (16.7 million colors), the change to 8-bit (256 colors) can have a serious impact on the quality of the graphic. Remember, however, the more bits a graphic has, the larger the file size and the slower the load time for your Web page. Slow loading impacts both the usability of your site and user attitudes about your site. I find it interesting that much of the early human factors research concerning the interaction between a system's response time and a user's expectations is once again a topic for discussion.
To get an idea of how the reduction in bit-depth affects the quality of a graphic, the graphic's file size and the associated load speed, it is important to understand the role bit-depth plays in your computer hardware. The number of colors your computer can display is dependent on the number of bits (bit-depth) your graphics card is capable of displaying. This table lists the bit-depth and corresponding number of colors:
Bits
Color
24-bit
16.7+ million colors
16-bit
65.5 thousand colors
15-bit
32.8 thousand colors
8-bit
256 colors
7-bit
128 colors
6-bit
64 colors
5-bit
32 colors
4-bit
16 colors
3-bit
8 colors
2-bit
4 colors
1-bit
2 colors
Not all graphics boards are capable of displaying the full range. Most Wintel machines produced in the last few years are capable of a maximum of 256 colors. Because I do a lot of consulting in academic environments, I still regularly encounter machines that can handle only 16 colors (truly a graphic designer's nightmare). Fortunately, the trend is towards basic machines with better graphics capabilities. To view some examples of GIF files at various bit-depths, check out my tip sheet on graphic formats. Since you can get to the tip sheet a number of ways, I don't have a direct link to get back here. Use the BACK button on your browser to return. Tip sheet
The other format used on the Web is JPEG. The JPEG format was created by the Joint Photographic Experts Group, who designed it to compress photographic-type images. JPEG is a "lossy" compression scheme where information about the graphic is lost during compression. Nevertheless if your graphics card is capable of displaying more than 256 colors, JPEG-compressed photos (saved with millions of colors) will be far more attractive than GIF-compressed photos. JPEG files are usually smaller than GIF files, but JPEG files tend to load slower than GIFs, so even though the file size is smaller it may not be faster loading. One of the most important things to remember about JPEG is that the lossy algorithm means that you should not open a JPEG file edit it and then save it. It's like making a copy of a copy, each generation is progressively less clear. Always edit the original file and then convert to JPEG again. The "lossy" process can also effect the readability of text in an image.
When you save a file as JPEG you will be given a choice as to the level of quality. Test your graphic with the lowest qualities first. I usually start with 25% and increase the quality in 10% increments. The lower the quality, the smaller the file, so you want the lowest quality that still looks good. My tip sheet on graphic formats has an example which shows the change in a JPEG file with different qualities. Remember, use the BACK button on your browser to return.
Now that you have some idea of the basics behind the two file formats, I can offer some guidelines on when to use them. While I haven't kept detailed logs, one of the most frequent questions I get asked is: "Which is better, GIF or JPEG?" My response is always a firm and unqualified "Well, it depends." Hey, just like everything else about the Web, there are no hard and fast rules, but there are some general guidelines to help you decide which file format is right for your image. I'll discuss the three guidelines that I think are the most important.
The first guideline is that you probably want to save photos and graphics that have soft fades and gradients as JPEG. JPEG allows you to preserve the millions of colors needed to make these images look their best. Of course, that doesn't help if your user only has a graphics card capable of displaying 256 colors, but it is really nice for those of us who browse the Web using thousands or millions of colors.
The second guideline is for drawings and/or graphics with broad sections or strokes of color. These are probably best saved in the GIF format. There are two reasons to favor GIF when dealing with these types of images. First, they often use far less than 256 colors, so it is easy to reduce the file size without hurting image quality. The second has to do with the JPEG conversion algorithm's tendency to introduce artifacts into images with broad sections of a single color. Artifacts are those strange, random dots that often appear in JPEG files. I tell my students to watch out for JPEG "measles" and to use the GIF format if they are too evident. The best way to understand the differences is to look at an example directly comparing GIF and JPEG. I have one on the tip sheet on graphic formats.
The third guideline is directly tied to both your user definition and your Web site's purpose. If you are a designer of a site for a museum, you are going to have to balance the need for high quality image representation with the needs of users who are likely to be accessing your site through dial-up lines. I call this the "style versus file" dilemma. I've seen a number of Web books that advise developing two different pages, one for users with high bandwidth access (ISDN or faster) and another for low bandwidth access (33.6 modem or slower). While this might be a solution for a small site, it is not realistic for larger sites.
The solution I prefer is to provide a thumbnail of each image that is then linked to a larger, high-quality image. The most important item to include, preferably next to the thumbnail, is the size of the larger image file. Your users can then make an informed decision on whether or not to download the higher quality image. I have an example on my Web site. In the 3D images section, you see a page of thumbnail GIFs with the image titles. To get an idea of the load speed of a large image, you can click on any of the images. The large images have been saved as progressive JPEG at 75%, and average around 35K. (Go there now, use the BACK button on your browser to return.) The same images, when saved as GIF with 256 colors, average around 100K, and even at 256 colors, the quality of the images suffers considerably. However, you will notice that I used the GIF format (64 colors) for the thumbnails. I decided to do this because GIF files load faster than JPEG files, particularly with few colors. As the thumbnails are meant to give an indication of the image, and not an exact representation, I decided it was better to focus on designing the files on the page for fast loading. If you were designing a museum site, your decision on the thumbnails might be different, as the thumbnails may need to be of higher quality (256 colors or JPEG @ 75%) to give a more accurate representation of the larger image.
Feel free to contact me with questions or to talk about how the axsWave Software team can help you with your Web site:
Janette B. Bradley (janette@metronet.com)