Skinny Graphics
File optimization goes beyond the browser-safe palette
5/10/98

by Jennifer Fleming

Up until recently, the phrase "web graphics" has been roughly synonymous with "browser-safe palette." Designers have dutifully worked to understand the limits of color on the web, both to control unsightly color shifts and to reduce file sizes. At the same time, heated (and futile) arguments have broken out over whether GIF or JPEG is the better multi-purpose format.

There's a lot more we can do to create skinny, fast-loading graphics. Understanding color and file formats is certainly a part of it. What many designers are discovering lately, though, is that optimization goes beyond restricting yourself to 256 safe colors. And it certainly goes beyond using one catch-all image format for every purpose.

These days, usability is a serious factor in site design. Designers who understand how to balance aesthetics with speed will be ahead of the game. Creating "graphics-free" sites (as some people propose) is a poor alternative, since graphics play an important role in guiding, entertaining, and informing visitors. Building streamlined sites with fast-loading graphics is the best solution.

There are many things you can do to reach this goal, including some of the following techniques:

• Reduce the image's physical size
• Reduce the number of colors
• Be selective about dithering and anti-aliasing
• Use the right file format
• Use image compression tools
• Use image HEIGHT and WIDTH tags
• Recycle graphics wherever possible

Creating skinny graphics means trying many different methods to see which combinations work best. It's subjective, since you're balancing your perception of how the image looks with hard facts about its size. While there are no hard and fast rules about what's attractive, there are some guidelines about file size. Generally, you want to work toward a total per-page limit of about 30K. That's about 15 seconds of download time on a 28.8 modem.

view a printable version of this article