Browse DevX
Sign up for e-mail newsletters from DevX


Optimizing Design: Slicing

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




Building the Right Environment to Support AI, Machine Learning and Deep Learning


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.

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 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:

Slice large images into small pieces for faster perceived bandwidth.

Think about logical divisions for sliced graphics.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date