home purpose join itg ITG Publication job bank itg listserv hf/Web conferences library

WORKSHOP Introduction to Web Graphic Formats Karen Gordon, tjgordo@erols.com, Electronic Publications Pawan R. Vora, pvora@uswest.com, U S WEST To achieve the goal of having the highest possible quality images with the smallest possible file sizes, it is important to understand how different graphic formats on the Web work and select the most appropriate file format. As you may know, GIF (pronounced "jif") and JPEG (pronounced "jay-peg") are the two most common graphic compression formats on the Web. Here, we'll discuss these two formats and give you an introduction to the new and upcoming graphic compression format PNG (pronounced "ping"). TERMINOLOGY Color bit depth Simply speaking, color bit depth describes the number of colors the image includes. An 8-bit image is a graphic that contains 256 or less colors, whereas a 24-bit image contains up to 16.7 millions colors. This is computed by multiplying the color-bit depth by two -- 1-bit equals 2 colors, 2-bits equal 4 colors (2 x 2), 3-bits equal 8 colors (2 x 4, 24-bits (16.7+ million colors), and so on. The bit values also represent the computer monitor display capabilities. So, 24-bit monitors are capable of displaying the 16.7(+) millions of colors available, whereas, 8-bit monitors can display only 256 colors. Compression Methods There are two approaches to compression: lossless and lossy. Lossless data compression method reduces the file size, but does not modify the original graphic. Whereas, lossy compression results in some loss in the image quality. GIF is a "lossless" compression method, whereas JPEG is a "lossy" compression method. Dithering When an image contains color that is not available on a system colormap, the program tries to find colors that are close to those in the actual image and then replace blocks of the original color by a mixture of colors actually available on the computer. This process is called dithering. Interlacing The interlace causes the image to load quickly at a low resolution and then gradually increase to full resolution. Plug-in? A plug-in is a small executable program that extends the browser’s capabilities enabling animations, 3D, video, audio, specialized files for business and utilities, image viewers and multi-system compatibility. Web-safe Color Palette The Web-safe color palette option creates a palette based on the 216 browser-safe color cube. These colors do not dither on Windows and Macintosh platforms. Graphic Interchange Format (GIF) The Graphic Interchange Format (GIF) is the most frequently format used on the web for images. It is a 'lossless' compression method and uses a maximum of 256 (8-bit) color palette. GIF uses the LZW (Lempel-Ziv Welch) compression scheme for reducing the graphic size. LZW compression looks for colors that don't change in an image. When it encounters areas in an image that repeat or don't change, it can implement higher compression. However, it compresses horizontally; also referred to as 'Run Length Encoding.' Therefore, if a graphic has fewer color changes horizontally, it will compress better and have a smaller file size. Therefore, if you are using gradients, it is better to use vertical, top-to-bottom linear gradients, where each horizontal line is one color. There are two different types of GIF file formats: GIF87a and GIF89a. GIF87a is the basic, more commonly used GIF format and supports interlacing. GIF89a, on the other hand, supports transparency and animation in addition to interlacing. Transparent GIFs The GIF89a format allows you to define one color in a graphic as "transparent" to create the illusion of irregularly shaped grahics; the process is also called "masking." If you are using a solid background color on your Web page, you could simply create your graphics with the same background color (or pattern) as the Web page to create a 'transparency' effect. Reducing GIF file sizes To make GIF files smaller, you should use as few colors as possible. Most image editors such as Adobe Photoshop and PaintShop Pro alow you to reduce the number of colors in a graphic. Also, to ensure that your graphics do not dither (have grainy or mottled look), you should always work with 216 browser-safe colors when creating graphics. Dithering not only makes the image look bad, but also adds to the size of the graphic files. So, you should be careful when using different filters available in your image editor. Use of most filters inevitably lead to subtle changes in color, which when reduced to 216 browser-safe colors, causing dithering! Useful Resources Victor Engel's 'No Dither Color Palette' Joint Photographic Experts Group (JPEG) A JPEG format, created for photographic images, ensures that the image maintains the same or comparable quality when placed online. JPEG compression was designed for photographs and continuous-tone images. Unlike GIF, which is limited to 8-bit images (256 colors), JPEG supports 24-bit images (up to 16.7 millions of colors). The file sizes and quality of the JPEG image depend upon the compression level: high, medium, and low (Adobe Photoshop offers 10 compression or quality levels). As you may have guessed, the higher the desired quality, the higher the compression and smaller the file sizes. Also, JPEG is a lossy compression method and some image quality is lost during the compression -- often imperceptible when saved at higher quality levels. JPEG format should be used for photographic, continuous-tone images that have subtle or small color changes. JPEG, however, is not appropriate for images with large areas of flat color and line art illustrations. Problems with Progressive JPEG You may save JPEG files as Progressive JPEGs. This is similar to the "interlacing" option for GIFs. Progressive JPEGs render in stages giving the illusion of faster download; in reality, they take just as long (if not longer). However, browser versions before 3.0 do not recognize progressive JPEGs and show up as a "broken" image. Therefore, we recommend that, at least for now, stay away from Progressive JPEG. Portable Network Graphic (PNG) PNG is a new file format for web images that holds much promise for future use. The file format uses a lossless compression method that allows images to maintain their original quality. With PNG, you can save graphics with 8-, 24- and 32-bit color depth (i.e., millions of colors). Gamma Correction An important benefit of PNG is its "gamma correction" feature. Currently, differences in gamma between different platforms can make an image seem darker or lighter on platforms other than the one it was created on. For example, the images developed on a Macintosh appear a little darker on PCs, whereas those developed on PCs appear a little faded on Macintoshes. The PNG format can store the gamma value of the system on which the image was created. This value can then be used by the browsers to correct for the image's gamma value. However, for this to work, both the creating and displaying systems must know their own gamma, which is not the case in today's Web environment. Alpha-channel transparency Another benefit of the PNG format is its capacity to store a variable transparency value known as 'alpha-channel transparency.' This value allows your images to have up to 256 different levels of transparency (also referred to as 'translucency'). So, if you created a drop shadow with one background, you could easily use another the background color or pattern on a Web page without changing the original graphic. Adam7 Interlacing Scheme Like interlaced GIFs and Progressive JPEGs, PNG images can also render in stages using Adam7 interlacing. Why "Adam7"? Because Adam Costello wrote the interlacing scheme and 7 refers to the number of passes over the image. Note that, unlike GIF, which uses a scan line scheme to show the grahic in lines, Adam7 interlacing scheme "dissolves in." Important: On low-resolution images for the Web, the quality difference between JPEG and PNG is minimal. Because PNG uses lossless compression scheme, the file sizes are generally larger than JPEG for 24-bit images. We recommend that you choose JPEG over PNG for photographic material. you should favor PNG when it is used in 8-bit or lower color-bit depths. Unfortunately, there are few browsers currently capable of supporting PNG images, but users can download plug-ins via the Internet to enable PNG viewing abilities. Resources to learn more about PNG The PNG home page The Siegel & Gale PNG Live Plug-in for Netscape Navigator 4 The PNG Specifcation at W3C What graphic format to use when? Use GIF for illustrations, line art, text-based graphics, and images with large flat-colored areas. Use JPEG for photographs and continuous-tone images. Because Progressive JPEGs are not supported in pre-version 3.0 of browsers, avoid their use as far as possible. For now, because of limited support offered in the browsers, we do not recommend that you use the PNG format for your graphics. Need more info... We suggest you consult the references listed below for additional details and designing better Web graphics. Also, we will discuss each graphic compression format in more detail in future newsletters. References Graham, I. S. (1998). HTML 4.0 Sourcebook. New York, NY: John Wiley. Lopuck, L. and Hampton, S. (1997). Adobe Seminar's Web Page Design. San Francisco, CA: Adobe Press. Weinman, L. and Weinman, B. (1998). <creative HTML design> a hands-on html 4.0 web design tutorial. Indianapolis, IN: New Riders Publishing. Weinman, L. (1996). <designing web graphics> How to Prepare Images and Media for the Web. Indianapolis, IN: New Riders Publishing. Weinman, L. (1997). <designing Web Graphics.2>, 2nd ed. Indianapolis, IN: New Riders Publishing. © Internet Technical Group Last update: June 1, 1998 URL: http://www.sandia.gov/itg/newsletter/june98/graphic_formats.html hosted by Sandia National Labs Disclaimer: Neither Sandia Corporation, the United States Government, nor any agency thereof, nor any of their employees makes any warranty, express or implied, or assumes any legal liability or responsibility for the accuracy, completeness, or usefulness of any information, apparatus, product, or process disclosed, or represents that its use would not infringe privately-owned rights. Reference herein to any specific commercial product, process, or service by trade name, trademark, manufacturer, or otherwise does not necessarily constitute or imply its endorsement, recommendation, or favoring by Sandia Corporation, the United States Government, or any agency thereof. The views and opinions expressed herein do not necessarily state or reflect those of Sandia Corporation, the United States Government or any agency thereof.