Every week I stir-fry something. Stir-fried chicken, beef, or pork -- my family loves them all. I slice and dice the vegetables I have on hand, including carrots, celery, onion, garlic, cauliflower, and mushrooms. My kids will eat most any vegetable when it's sliced, diced, stir-fried, seasoned, sauced, and ladled on top of a plate full of rice.

My approach to serving up Web graphics is quite similar. I slice and dice them in an image editor. I season and sauce them with javascripted mouseovers. Then I ladle them on top of an html page full of text, and voila! Stir-fried graphics!

It's worth the work

Why would I go to all this work to serve up graphics? For one thing, slicing a single graphic into pieces allows me to optimize each part of the graphic for quality and size. Photographic images are smaller and of higher quality when save as JPEGs. Images with solid blocks of color are more accurately rendered as GIFs.

Here, for example, is a photographic image of tulips. A GIF version is on the left and a JPEG version is on the right.

Look closely and you will see the color banding that appears in the GIF version of the image. The JPEG version is significantly smaller at 3991 bytes than the GIF version (7738 bytes), yet it is more realistically rendered. Unfortunately, this is only true if your monitor is set to show more than 256 colors. If your monitor is set to show only 256 colors, both versions of this photograph will look similarly ugly and unrealistic.

The following GIF image is made up primarily of solid blocks of color.

graphical text in gif format

It is both smaller (5579 bytes) and more realistically rendered than this JPEG version, which was created with 20 percent compression (5786 bytes).

graphical text in jpg format, 20% compression

The following JPEG version, which was created without compression, is more than three times as large (16760 bytes) as the GIF version, yet the blocks of color are not quite as evenly rendered as they are in the GIF.

graphical text in jpg format, no compression

When an image includes both photographic portions and solid color portions, I use Macromedia Fireworks to slice and dice it into individual pieces. Then I save each piece in whichever format works best. Adobe Photoshop also has an image slicing tool, and recently released Microsoft PhotoDraw 2.0 includes such a tool.

Image slicing has use beyond separating photographic images from solid blocks of color. By creating a separate slice for the Tulips text, I can replace just that slice (and it's corresponding photographic image) on other pages with Jonquils, Daffodils, or other such text and images. Swapping only some elements of the larger graphic means that various pages that share it will load faster; the other graphics will already be downloaded and available in the browser's cache.

Slicing up the home, products, about, and help text prepares them for use as javascripted mouseover buttons.

Finally, I can replace the horizontal block of solid green with a single pixel of green. When I reassemble all these graphics into an html table, I can set the width and height of the tiny (43 byte) single-pixel GIF to fill the blank area in the table.

single pixel gif in Macromedia Fireworks

Serving it up

Check out the finished image in which the reassembled graphics form a seamless banner across the top of an html page, complete with javascripted mouseover buttons. Resize the browser width to see how flexibly the table accommodates this stir-fried banner graphic. Mouthwatering, isn't it?

Home Articles We've Written Stir-Fried Graphics