Image Slicing--Polish it off with a fresh hot SLICE of IMAGE pie, mmm…tasty!

Image Slicing: What is it
Image slicing is pretty-much what it sounds like, taking a single image and "slicing" it into smaller pieces. The intended purpose of the slicing is to provide Web designers/developers with a tool that allows them to better optimize their images for Net data transfer as well as enhance artistic design options. By using image design and editing utilities along with HTML tables you can seamlessly create larger graphics from smaller ones right in front of the clients eyes as they watch the page load.

Do Sliced Images Really Load Faster
Although the overall idea is to yield faster image or page download times, in reality the download advantage is usually just the clients perception of the download time. If the overall image is of a certain file size and is sliced into 4 smaller pieces that are each 1/4th of the total image file size, the total data transfer to display the entire image is still the same. In other words, 100k is the same data transfer as 25k x 4, (4) being four separate slices of 25k each.

So, What's the Benefit
The benefit comes from the client's perception, If the end-user views your Web site and they see the whole image start to download after 5 seconds, then it took 5 seconds to start the download. Perhaps it was a complete 10 seconds before the image finished downloading, but it was the 5 seconds of "nothing" on the monitor screen that they will remember. However if they saw one section of a sliced image start downloading after 1 second, that's the speed advantage that they will notice despite the fact that it still takes a complete 10 seconds to finish the image download.

Because a small slice of an image is composed of less data than the one whole image, it will be contained in fewer packets (possibly one packet, but this varies with file sizes, browser settings and transfer rates). This means that in theory the actual displaying of graphic slices will begin faster regardless of how long it takes to finish the entire image assembly.

The Role of Tables
Tables have been traditionally used to hold text strings and values. As the Web became more graphically saturated, it was not uncommon to find designers/developers using tables to hold images. However slicing involves using individual pieces of an image and assigning them to cells within a table (like a puzzle). Each cell within the table holds a piece of the image puzzle, with the cell padding adjusted to "none" to create a seamless restructuring of the image.

Image slicing can also provide designers and developers with a vehicle for pulling off some pretty impressive tricks. Architectural design enhancements such as wraparound effects that combine text and images, images designed to work with cell padding to produce optical illusions and other eye candy have been implemented using tables and slices. As a matter of fact, the downright abuse of image slicing has become an issue. In some extreme cases this abuse can actually negate the benefits of slicing images. Some overzealous designers/developers overload their pages with sliced images or create too many slices of a given image. Beware, there are many instances when slicing an image actually increases the time of download.

How Browsers Deal with Images
Browsers download information in packets on data streams, the size of these packets and the number of streams your browser will maintain at one time is another topic but by default most browsers can maintain 4 simultaneous downloads at once (these settings can be altered). This helps the client start viewing smaller downloads without waiting for larger downloads to finish which gives the appearance of faster downloads. However it can also be argued that this splits the bandwidth but that too is another topic.

This whole process begins by the browser pinging the server to see if it's there, the server will respond with a ping and a connection can thereby be established. Next, data begins to be transferred in packets. If the browser is downloading an image with a file size of 10K, that 10k is downloaded on one stream. However if the image is sliced into 5 separate 2K slices, in theory 4 of the 5 slices can download simultaneously on 4 separate streams. However you should remember that images should have height and width attributes so that the browser can delineate a space for them and then start downloading text. Fortunately, the table accomplishes this for you. The table defines the region of the images and the image tags define the size of the image.

Nevertheless, too many image slices can create a situation where the browser is making too many requests to the server for data and waiting for replies. This could cause the page to hang-up while loading or significantly increase overall download time. Therefore image slicing should be done sparingly and efficiently.