|
Load Time Tip:
Slice Your Images
by Tom Dahm,
Chief Operations Officer,
NetMechanic, Inc.
Want your Web page to load faster? Here's a good tip: slice your images before running them through GIFBot. Image slicing can dramatically improve the results you get.
By now just about everyone knows that slow Web pages are bad. A recent study by Zona Research found that fully one-third of visitors will leave a Web site if it doesn't load within 8 seconds. Since 35 % of Internet users are surfing the Web using a 28.8k modem or worse, that puts a severe constraint on the size of your Web pages. Generally, you want your page and all its graphics to be less than 40k in size. Since graphics make up the lion's share of your pages size, anything you can do to reduce the size of your images is good.
That's where image optimizers like our GIFBot come into play. GIFBot can dramatically reduce the size of your images by stripping unnecessary data from the image file. That makes your image thinner without loss of picture quality.
Not many people know, though, that GIFBot can be even more effective if you slice your images into a series of smaller images and then place them on your page using an HTML table. For example, suppose you have a 200 pixel by 200 pixel image that's 200k in size. Running it through GIFBot helps, and reduces its size to under 50k. But if you sliced this image into four separate images, each of which is 50 pixels by 50 pixels in size, and then fed each image through GIFBot, the combined size of all four images might be as low as 10k.
Why is that so? To understand why, you first need to know how GIFBot reduces GIFs.
GIFBot works by removing unused colors from your GIF. The normal color palette for a GIF includes 256 colors. Your GIF file stores information for all of those colors, even if they aren't used in your picture. That means your image has a lot of unnecessary information.
For example, look at the image below. This is a 10 pixel by 10 pixel image that we've magnified to show each pixel. This image uses only three colors: red, blue, and cream.
While you might think of this image as a simple 10 x 10 grid, it's more accurate to think of it as a cube consisting of 256 10 x 10 grids stacked on top of one another. Each of these 256 layers represents a color in the standard GIF palette.
If we run this image through GIFBot, it would throw away 253 of these layers, leaving only the red, blue, and cream layers.
That's good, but we could do even better if we split this image into pieces. Take a look at the picture below. This shows the same 10 x 10 pixel image split into four separate 5 x 5 images.
The key here is that we've sliced the image so that three of its pieces contain only a single color. Now GIFBot can reduce these images even further by throwing out their red and blue layers. Only the lower right image needs to have all three colors, so we leave it with a three-color palette. As a result, the combined file size of all four optimized 5 x 5 images is less than the optimized 10 x 10 image. Now we can reassemble the image on our page using an HTML table.
This is a great trick, but you need to know a couple of things before using it.
First this technique only works for GIFs; it won't improve the size of your JPEG files. GIFBot reduces JPEGs by increasing their compression ratio, so the number of colors used has no effect.
Second, as you can tell from our example, image slicing works best for images that have clearly defined regions of color. Images with evenly distributed colors won't gain much from this trick.
Third, this trick works best with big images. The larger your image, the easier it is to slice and the bigger the savings.
Finally, keep in mind that using an HTML table to reassemble your sliced images can introduce its own problems. Be sure to set BORDER="0" in your table to avoid problems under Netscape Navigator. And don't forget to improve the load time of your tables by setting their HEIGHT and WIDTH attributes.
|
