Notes from 46th International STC Conference
Cincinnati, Ohio, May 16-19, 1999

Optimizing Graphics for the WWW -- GIF, JPG

Amey L. Celoria
Amy Designs, Inc., Indialantic, FL

Amey is also an independent contractor for Global Constructs Group

Session Description: Detailed explanation and description of graphic file formats, including a demonstration of file compression techniques.

Handouts: Posted on SpaceTech Chapter Web site.

• Pitch is intended for those who do not necessarily have the latest cutting-edge tools (e.g., Debabelizer) for handling graphics.
• Raster image: pixilated images, or bitmaps. Pixels are arranged in x,y, and z axes. Lowest common denominator (LCD) for colors is 8-bit, 256 colors. Increasingly, thousands or millions of colors are becoming available, but some users don't even know enough to set their system preferences up to handle them. Thus, designing for 256 colors still has something to be said for it.
• In resizing raster images, stay within 15% of the output size.
• File size goes up with the size and resolution of the image.
• Vector image: Based on mathematical images of the graphics (exports from Freehand, Illustrator, etc.) instead of pixels. Because of this, image resolution does not degrade with image size. However, because of the mathematical base, vector images do require plug-ins in the browsers to be viewed.
• Resolution: refers to limits in physical space for a given device to project images (72 dpi on up to 1,200 or higher).
• Color depth: defines the number of colors in each pixel. More colors mean larger file sizes and longer download times. Most designers still work with the LCD (8-bit), although more users are becoming capable of 16-bit color.
• Compressibility: how well a graphic is designed drives how effectively GIF or JPG can compress it.
• Storing color raster images: RGB or indexed. Adobe PhotoShop lets you design in RGB and then take it into an indexed mode when you are exporting it. You lose some detail, and some pixillation occurs. PhotoShop 5 allows much higher quality GIF compressions of photos... this requires optimum assignments within the color table.
• The "color cube" = 216 colors that are completely compatible between PC and Macintosh on any browser. (Note that this is 40 colors fewer than the 256 colors in the total palette. The remaining 40 are to cover slots that Windows reserves, which Macintosh cannot be assured of matching.)
• Dithering occurs when you try to use a color that is not available within the 216-color palette of the color cube... the browser uses dot patterns in an attempt to simulate the color you are using.
• One of the most challenging aspects of Web design is the lack of total control over what the user will see on his/her platform and browser.
• Color blending can be used to achieve a color that is not in the 216, especially for backgrounds. You pick a couple colors that are similar and create a pattern 2 pixels wide by 2 pixels high blending the 2 colors... these merge optically and the viewer gets the effect of the hybrid color.
• Anti-aliasing creates pixels of color that are graduated from the original color down to the background color, thus producing a smooth edge and graceful transition. It creates a raster out of the vector image. If you do not use anti-aliasing, you will experience jagged edges (the "jaggies").
• The Golden Rule of File Size Reduction: Always start with the best image possible. Then gradually reduce the size, colors, and quality of the image until it is below acceptable quality, and then Undo. Reduce and Undo again and again, gradually raising the settings until you just break through the threshold of acceptability. Use this method any time you prepare indexed GIF images for the Web.
• Book references: Creating Killer Web Sites and The Secrets of Successful Web Sites by David Siegel.
• GIF means Graphic Interchange Format. It is an LZW (Lempel-Ziv-Welch) compression, originally developed and still owned by Unisys; individual users, however, are licensed to create GIF files. GIF compression ratios average 4-to-1.
• GIFs are best for line art and text (e.g., graphics with a lot of callouts).
• GIF compresses by pattern recognition to determine how the image is drawn, row by row, by total number of pixels in each color... e.g., 15 red, 6 blue, 10 white times 15 rows.
• GIFs generally produce very small file sizes and are therefore good for Web use.
• GIFs are not generally good for photos; quality is blurry.
• Always save your layers in PhotoShop! This can avoid having to totally redo a graphic to modify a background gradient, etc.
• Interlacing graphics when exporting them gives viewer progressive disclosure. This is OK for smaller graphics, but it is not appropriate for key images, when you want the reader to wait and get the full impact all at once.
• Compression is the key to file size and download time. Always use the fewest colors possible and still achieve the threshold of acceptability. This involves a series of conscious tradeoffs, image by image, between quality and file size.
• Reduce the palette... reducing the number of colors reduces file size. It also eliminates some of the colors that are introduced in anti-aliasing. However, if you are going to end up with a 216-color Web palette, it is best to design the graphic that way from the start.
• Adaptive palette... browser "interpolates" with 216 colors to approximate the hues and shades of millions of colors.
• JPEG = Joint Photographic Experts Group. Best way to compress photographic data and render it into images.
• Small photos tend to look better with GIFs; large, complex photos work better with JPEGs.
• GIFs duplicate the original; JPEGs use lossy compression, meaning there is some "pixel averaging" to fill in gaps. It also means JPEGs get rebuilt every time they are changed/saved; thus for best results you must always return to the original for updates.
• JPEGs capture gradients much more smoothly than do GIFs, which create a striped effect.
• The higher the compression ratio, the lower the image quality. This is because the high-compression file is more different from the original than is the low-compression file.
• JPEG compression ratios range from 8-to-1 to 100-to-1.
• Progressive display is JPEG's answer to interlacing with GIFs.
• JPEGs will not handle transparencies or animations.
• Online resources
   
• Lynda Weinman and Bruce Hevin, authors of Coloring Web Graphics -- An excellent source for tried and proven color schemes.
• Macromedia Fireworks 2 is a powerful tool for Web graphics.
• ImageWorks does a real good animation with GIFs.
• The Web site designer can include a disclaimer specifying that the site is best viewed at a certain resolution; however, not all users will know how to (or even be ableto) change the preferences to accommodate this. Some are workstation-limited.
• Microsoft has deliberately set up Internet Explorer in a manner that is graphically incompatible with Netscape... thereby posing a dilemma for designers who have to accommodate both browsers. Right now the best solution is the 216-color cube; the adaptive palette is much friendlier to a broad base of user browsers than an exact palette.