Compressing Graphics for the WebBy Clifford F. SchinkelClifford Schinkel is president and founder of MediaMania, Inc., a Portland, Oregon based multimedia company in business since 1994. Cliff has 16 years experience with digital graphics, and has designed cutting-edge media for hundreds of large corporations. He teaches at Portland State University and has been instrumental in the successful startup of more than one “dot-com” company. Download the PDF file for this article.You’ve just clicked on an URL to a visual catalog you want to see. As you sit watching the lights flicker on your 56K modem, you start counting the seconds as the page gradually builds. Five, six, seven,… you can see a menu bar dissolving into place; eight, nine, ten,… there’s a logo; eleven, twelve,… there’s still no sign of that catalog yet; thirteen… oh, forget it! You click the next URL in search of a faster catalog. Patience is not a common trait in this world of instant gratification. Web surfers typically grow tired of waiting for a page to load within 12-15 seconds of the initial click and move on. As a graphic designer, your ability to provide as much visual content in as little time as possible can make all the difference to the success of a commercial site. That’s where compression comes in. The understanding of the different types of compression and how they work should factor into every smart design decision. In fact, if you surf the Internet long enough, you will begin to recognize how the principles of compression have influenced design trends and shaped the look of the Internet as a whole. So how does compression work? How can you take a numeric description of an image, chip it away to a fraction of what it was, and still have the same image? There are basically two ways to accomplish this task. You can either “eliminate redundancy” or you can “delete extraneous information.” Let’s take a closer look. In the case of the former, eliminating redundancy is often called “lossless” compression, because all of the original image data can be recovered from its compressed form. The most common type is Run Length Encoding (RLE) compression, and is found in the .gif file format, as well as Windows .bmp, and Macintosh pict file formats. Even Photoshop’s own format, .psd, uses a form of RLE to save files. In bitmap images, a pixel is described by three numeric values, 0–255, one each for its R,G, and B components that determine its color. RLE compression actually runs the length, horizontally line by line, of an image, and detects whether there is repetition in the pattern of numbers. That is to say, it only records if the color changes. An analogy would be if I were to say to you, “I bought a grape iMac. I bought a grape iMac. I bought grape iMac.” as opposed to saying, “I bought three grape iMacs.” The latter is much more efficient, but communicates the same information. So it stands to reason, then, that images in which the color of the pixels are consistent in a horizontal manner will compress very well under this compression scheme. Horizontal stripes will compress better than vertical stripes. Aliased graphics will compress better than anti-aliased graphics (having fewer pixel changes across edges). And, large areas of flat color will compress better than minute details or noisy textures. Cartoon illustrations in general will compress better than photography. As a web surfer, you may notice that the most heavily trafficked sites generally have very flat graphics. They lean towards flat bars of color, hard edged shadows, and a general horizontal motif in the linework. They avoid the fancy beveled edges, soft shadows, and ornate textures that you may find in other media. The other compression type is often referred to as “lossy” because it actually discards information from the original image. The most common format to use this scheme is JPEG (Joint Photographers Expert Group), and it was created specifically as a way to reduce the size of digital photography for Internet transmission, while maintaining visual integrity of the image. Again, being described by three numbers from 0-255 each, a pixel can be any of 16.7 million possible colors. However, the human eye on average can only see 7.8 million. This means that if one pixel has a value of, say, R-58 G-129 B-202, and the next adjacent pixel was R-59 G-128 B-201, the average human could not discern any visible difference between them. That would be considered “extraneous” information, and would be discarded. In other words, a lossy compression scheme will actually take an area of pixels, and depending upon the degree of variation between them, will create an average description for that area. Unlike RLE, however, which is a fixed formula of yes or no responses to a question, JPEG allows you to set a tolerance level. By using the quality/compression slider upon saving, you decide how far the numerical descriptions between adjacent pixels can differ before the algorhythm averages them or not. In summary, the general rule is that JPEG works best on photography, for which it was invented, and RLE (GIF) works best on graphics and illustrations. But it is the content of the specific image you are compressing that will ultimately determine the best compression to use, and some trial and error may be needed before you find the best solution. Being able to judge an image by eye, and find that perfect balance between compression level and visual quality only comes from time and experience, but is the mark of a true web graphic professional. |