Skinny Graphics
File optimization goes beyond the browser-safe palette
5/10/98
Up until recently, "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:
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.
Physical Size
Before you do anything else, look at the dimensions (or physical size) of your image. Can you reduce it without losing information or details? In many cases, full-screen photorealistic graphics act like a wall between users and content, largely because modem users have to wait long minutes while these monster graphics download. Remember that your front door is not a book cover or a billboard. It doesn't have to incorporate a large, full-screen graphic. An interesting layout can often be created without this billboard effect.
Experiment with shrinking your graphic to achieve the same effect in a smaller space, or with creating part of it with HTML (such as table background colors or interesting fonts). Every inch that you can trim off your file's physical size can be a substantial file savings.
Colors
The fewer colors in an image, the smaller its file size. In an image editing program such as Adobe Photoshop, you can reduce the number of colors in each image's palette. In creating your artwork, make sure to use browser safe colors (the 216 colors that display consistently on
both 256-color Mac and 256-color PC monitors). But don't stop there. Instead, shoot for saving files with less than these
216 colors.
An image created using four browser-safe colors and saved as an Exact Palette 4-color GIF will be three or four times as fast as the same image saved as a Web Palette 216-color GIF. In the second case, the image is carrying around 212 extra colors it doesn't need.
You can also try posterizing images to reduce colors before converting to the browser-safe palette (in Photoshop, you can find Posterize under the Image >> Adjust menu). Other ways to reduce colors include using flat art (illustration) instead of detailed color photos, and using simple black and white images wherever possible.
Dithering and Anti-Aliasing
Images that are "fuzzy" (dithered) or photorealistic usually
sport much larger file sizes. By reducing dithering, you can
reduce file sizes. To do this, avoid saving files with "diffusion"
in Photoshop, and always try to work with web safe colors
from the start when creating artwork for the Web. Doing so
will mean less need for masking unsightly color shifts with
dithering effects.
Also, in creating text as an image file, you might choose to leave text aliased (or pixelated) instead of smoothing the edges with anti-aliasing. This can reduce file sizes by half, though it does looks jaggy. Experiment with different effects to find the balance between attractive images and small file sizes.
File Formats
If you are working with a photo, use a compression format
meant for photos (JPEG). If you're working with an
illustration or with text as an image, use one meant for
drawings (GIF). Saving an image with an inappropriate format
can double or triple the image's file size, not to mention causing
unpleasant color shifts and other effects.
There is no such thing as one multi-purpose image format, despite what you might have heard. Rather than religiously using one image format instead of another, let each image drive your solutions. The quality of your results -- both in aesthetics and in file size -- will be much more predictable.
Compression Tools
There are an increasing number of excellent image
compression tools available specifically for Web design use.
BoxTop Software has some of the best, including Image Vice,
a power tool for crunching web images. These tools are
available for both JPEGs and GIFs. They can buy you file
savings even after you've reduced size, color, and everything
else you can think of.
BoxTop has a tool called Web Clipper which can help you to stay within the browser-safe palette even after heavy file editing and compression. Even if you worked with browser-safe colors from the start, shrinking a file, running a filter, or converting to a different format can cause colors to shift. Web Clipper shifts large areas of color back to the safe colors without marring your image.
HEIGHT and WIDTH Tags
Once you've created your speedy images, make sure to include
image width and height (in pixels) in your code. This tells the
browser the dimensions of the images it will need to
download, which lets the browser begin to display a page
before images are finished loading.
You should also make sure to use ALT tags to offer alternative text that will be displayed while graphics are downloading. This means that users don't need to wait for graphics -- even speedy ones--but can jump to what they need to find.
Recycling Graphics
In terms of speed, the next best thing to using no images is to
use images that are cached. Cached images are the ones that
have already been downloaded (for example, the images from
the screen you just left). The web browser stores these images
in its cache for short-term use. Reusing certain images across
your site will make pages seem to load faster, since the
browser will pull them from the cache instead of from the 'Net.
These are just a few of the things you can do to help speed up your graphics. If you have other ideas, secret recipes, or clever tricks, feel free to tell people about them in the discussion forum.
References
BoxTop Software
http://www.boxtopsoft.com
Makers of web graphics tools such as Image Vice and Web Clipper.
Adobe
http://www.adobe.com
Information on
Adobe products such as
Photoshop.
Lynda.com
http://www.lynda.com
The site for Lynda
Weinman's definitive web
graphics book,
Designing Web Graphics 2.
Ultimate Photoshop Resource
http://www.mcp.com/resources/design/frame_ultphoto.html
Tips, tutorials, filters, and more from Macmillan Computer
Publishing's Ultimate Photoshop Resource.
Secrets of the Web Design Masters
http://www.builder.com/Graphics/Masters/?st.bl.graph.feat
Builder.com interview with top web designers reveals production tips and tricks.
Image Editing 101
http://www.hotwired.com/webmonkey/html/96/41/index2a.html
Webmonkey article on getting started with image editing for the web, including the crucial first step: cutting back.
Limit Yourself: Small and Safe Color Palettes
http://www.tripod.com/computers_internet/lifesupport/columns/gifgirl/970218.html
Gif Girl, Tripod's design columnist, tackles optimizing images
by reducing color palettes. Includes how to load the browser
safe palette.
Web Page Design for Designers: Typography
http://www.wpdfd.com/wpdtypo3.htm
Explains aliasing and anti-aliasing with type.
GIF vs. JPEG
http://www.hotwired.com/webmonkey/geektalk/97/30/index3a.html
Webmonkey Q&A on when to use GIF and JPEG formats.
Yale Style Manual: Graphics File Formats
http://www.med.yale.edu/caim/manual/graphics/graphics.html
Describes graphics formats and compression methods and covers basic optimization tips.
Equilibrium
http://wwwequilibrium.com
Makers of DeBabelizer, a high-end image compression tool for Mac and Windows.
Yale Style Manual: Height and Width Tags
http://www.med.yale.edu/caim/manual/graphics/height_width_tags.html
The skinny on why including dimensions in your IMG SRC tags will speed downloads.
Jennifer Fleming is an Anchor producer and the author of the upcoming book Web Navigation: Designing the User Experience (O'Reilly, 1998). She runs Square Circle Solutions, a Boston-based web firm specializing in user experience consulting and idea generation.
© 1998-1999 Anchor Productions, Inc. All rights reserved.