TechNote (Archived)

What effect does slicing have on image download speed?

Slicing a large image won't necessarily make it display faster or slower. There are various factors that can make a sliced image faster, and offsetting factors which can make a sliced image slower. Much depends on the individual project, browser, design, and perceptual issues.

How do browsers download files?
Browsers can usually download multiple streams at a time. If you look at a modem while it's downloading a single file then you'll see that the"busy" lights aren't on all the time. That's because the browser has to wait for each package of information to arrive.

Because of this, most browsers speed up their overall download by making multiple file requests at the same time. In practice, many browsers are set up to handle four simultaneous streams. It's possible to handle more simultaneous streams, but then packets can start bumping into each other, so four simultaneous downloads is a common setting.

When a browser requests a file, there are usually four steps of negotiation. First, the browser asks whether the server is there. Second, the server confirms that it is serving. Third, the information is sent. Fourth, the connection is closed. These four steps take a discrete amount of time, and the number of times they are repeated for each slice will increase the total download time.

So, a certain amount of slicing can help, because the browsers work most efficiently when they can make three or four simultaneous requests. Too many slices can hurt, though, because each new file request requires a new set of file negotiations between the browser and the server.

What design issues affect download speed?
Your pages may have features that can directly benefit from image slicing. If you don't take advantage of slicing, then the overall downloads can take longer than they might.

Are there graphic elements which repeat from page to page? For example a logo which is on every page, or a sidebar or design which is used in several different graphics. If so, then unsliced images will download this repeating element again for every page that's visited. But if the graphics are built as image tables, then the logo or repeating element would only be transferred once, and can be quickly drawn from the browser cache to make subsequent images.

(If you'll be creating image tables with repeating elements in Fireworks, then it can be useful to import a repeating element, position it, and then "Insert Slice" to be sure that the slice is always the same size. Check to make sure that each new image table points to the same repeating file on your server, instead of downloading many different copies of the same pixels.)

Another design issue that can affect slicing's download speed is if different parts of the image would benefit from different types of compression. If the left side of an image is a scanned photograph, and the right side is mainly text, then you can usually get improved image quality and download times from slicing and give each slice its own compression settings.

If you've sliced an image in Fireworks, and find that too many slices were created, then it can often help to examine the slicing pattern for rows or columns that can be removed. Show the rulers and drag out some guidelines, so you can snap slice boundaries to make sure no one-pixel rows are sent. In some cases, even making a slice a little larger can get rid of an additional row of table cells and speed the overall download. The slicing pattern can have an affect on the overall download speed.

What perceptual issues affect download speed?
The way a browser displays images can also affect how fast your visitor feels that the page loads. Sometimes people feel that a sliced image displays faster because pieces pop into view as they watch.

Other times people prefer sliced images because the ALT tag can indicate the type of content before all the pixel data arrives.

Browsers differ greatly in how they display large images during download, or the speed at which they render nested tables, so it's difficult to make firm rules here. Still, there can definitely be a perceived speed increase with some image slicing.

Summary
Sometimes slicing can make downloads faster, but sometimes it can make it slower... much depends on the situation. Browsers do benefit from parallel downloading, but too much slicing is worse than not enough. Some images do have features such as repeating elements or areas with different compression styles where slicing can help. In some sites, people may also perceive a page as being faster when the total download is actually longer.

It's hard to make firm rules about the effect, but it can be useful to test a new design with a few slicing schemes. Differences are easier to see on an older machine, with a modem and a dialup connection. Be sure to flush the browser's cache before testing download speed.