ividing a larger graphic into smaller pieces is called slicing. It increases your perceived bandwidith.
Big graphics may look great and contain lots of informationbut 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 formatsa 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.
Step 1: Analyze the Graphic
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 reassemblednot 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 sizeand real download timecan 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:
Slice large images into small pieces for faster perceived bandwidth.
Think about logical divisions for sliced graphics.