Slicing

ividing a larger graphic into smaller pieces is called slicing. It increases your perceived bandwidith.

Big graphics may look great and contain lots of information?but anything covering large amounts of screen space appears to load very slowly.

One way to deal with large graphics is to slice them into several smaller pieces. Each piece displays as it loads. Although the total download time is the same, the perceived download time is quite different. The viewer feels something is happening and is seeing changes on the page in front of them.

Notes: Instead of loading as one large grahic, this image arrives and displays in six smaller pieces.

In addition, if your graphic contains both line art and photorealistic components, you may be able to divide the graphic into pieces and save them in different file formats?a GIF to make a smaller line art file and a JPG to make a smaller photorealistic file. This will decrease your actual download time as well.

Analyzing your images makes slicing more effective.

There are three basic steps to slicing. The first, and perhaps most important step, is looking at your graphic and deciding where it logically divides. Remember, you are creating something that can easily be reassembled?not a jigsaw puzzle!

Your slices are limited to pieces with square corners. You’ll be reassembling the pieces in your HTML page, so don’t go overboard with the slicing.

Let’s look at this image and see how it might be divided:

Are you going to reuse any elements of the image? If so, those changeable pieces should be their own slice. In this example, “history” looks like something that might be swapped out with other categories.

Can some parts of the graphic be economically stored as GIFs while others work better as JPGs? If so, by breaking the files into these pieces, the combined graphic size?and real download time?can be reduced. Make sure that the colors of different images saved in different formats are compatible.

Are there logical divisions? For example does the graphic visually split into three vertical sections? Use these logical divisions where possible.

Here’s one way this image could be divided:

Use tables in your HTML page to reassemble the slices into a whole graphic.

You have graphic slices saved in individual files and now you’re ready to place them into your Web page. The best method is to use tables for the assembly.

Make sure the table has cellspacing and cellpadding attributes of 0, be sure the border attribute is set to 0 and make sure you have no extra spaces or returns in your code.

If you want more information about tables, check out GettingStarted.net’s Building Tables.

The image below is actually made of six smaller files. Click anywhere in the image to see the code that build it.

Pseudo imagemaps are a way of increasing perceived bandwidth and offering the features of an imagemap at the same time.

One of the inherent problems of using imagemaps is that the graphics are often large and feel slow to download, especially over a modem. Solution? Try a pseudo imagemap.

With the pseudo imagemap technique, you break the image into sections and include links around the different sections. Pieces start appearing on your reader’s screen quickly, proving immediate feedback. Think of a pseudo imagemap as being slices with links.

To create a pseudo imagemap, start with the graphic. Pick the image you want to use as your imagemap and figure out where it breaks into logical (and preferably square or rectangular) shapes. Then, use your graphics tools to divide the image into individual files, optimizing each for the fastest download.

In this example, we are creating a menu over an asteroid image. These are the four slices used to create a temporary Coolest on the Web menu page.

The first gif, obviously…

The second gif…

The third…

And the last gif, just spacer really. We could even use a table cell with a black background instead of the gif, but with the gif (which is very small) we know that our colors will match the other slices exactly.

Once you have created your graphic and split it into pieces, it’s time to create the HTML code. To produce a graphic that appears seamless on a page, you have to bunch all the tags together with no spaces or line feeds in-between. This can make your code difficult to read, but if you add returns, some browsers will treat the returns as individual spaces and place a little sliver of white space in between the pieces of your pseudo imagemap.

The HTML for this pseudo imagemap menu is:

Look at the code carefully and notice that:

• All of the <>‘s are flush against one another.

• Anchor tags within the image tags create links between sections of the imagemap and specific URLs.

• In the img tags we set the border equal to zero. This tells the browser to show no link border around the graphic. By avoiding the link border, the pieces of the graphic touch each other when they are displayed and no annoying purple active link line breaks up our graphic.

It’s really quite a simple trick. A bit confusing to look at the HTML code perhaps, but the results are well worth the effort.

The technique of slicing can be applied to many types of graphics for many effects.

Slicing can reduce the file size of an animated GIF.
If only a small part of a large image is animated, why not using slicing to divide up the image into pieces, and reload only the piece or pieces that change during the animation:

Notes: In this example only the sun needs to be animated, if it is isolated and the entire image is built into a table, the resulting file size is much smaller. As one large animated file the size is 25K. The individual files that are assembled in the table add up to 6K, a substantial savings. The sample shows the table with a border=1 so you can see where the slices are.

1. Slice the large image into several smaller pieces. Make the piece that contains the animation as small as possible.
2. Save single GIF or JPEG files for each unanimated piece.
3. Save an animated GIF for the part that has animation.

Slicing can simulate wrapped headlines.

With HTML limitations, pictures, headlines, and text must occupy rectangular spaces that can’t overlap or cross over into other rectangular spaces. However, the illusion of a headline that is part of a photograph and at the same time breaks out into the rest of the page can be created by using tables and a sliced image.

Click on the image to see how it divides into slices:

	There is nothing quite like a beach resort to say: I’m on HOLIDAY! Beach Resorts of the World brings you the premiere listing of places to go and stay oceanside from Maui to St. John’s, from Tahiti to Sidney.