How and Why to Slice Web Images

It's often debated whether or not slicing Web graphics actually makes them load faster. Some people will tell you that slicing an image does not reduce the overall size or load time and it's our human perception that makes it seem like the page is loading faster. Another group will tell you that slicing images can actually increase load time due to the additional simultaneous requests to the Web server. And then there is yet another group that will swear that slicing large images can significantly reduce the time it takes your pages to load.

 So, who's right and who's wrong?

Well, there's actually some truth in all of these arguments. It's true that the act of slicing an image will not decrease the file size in and of itself. Simply slicing and saving each section with the same compression settings is pointless; but by optimizing, you can reduce your images by several KB's and you will often get a better looking image too. In this scenario, it's not the act of slicing that reduces the download time, it's the act of compressing each slice to optimal settings.

We'll explore this further with some examples in a bit, but for now here's a brief explanation: You may have an image where some areas compress better as GIF and other areas compress better as JPEG. If large portions of the image have solid colored areas, they can be eliminated completely and replaced with a background color in your table layout. It's extremely important to understand how compression works in order to properly place your slices for the best results.

In addition to optimizing, other reasons for slicing Web graphics are:

1. when you can repeat or stretch a single small image to fill a larger space,
2. creating mouse rollovers and clickable image maps
3. animating portions of a large image.

We'll closely examine each of these scenarios in the following examples:

Example One is a splash page for a Web site that was created in ImageReady. In this example, slicing allowed us to create rollovers, make portions of an image clickable, and strike a nice balance between file size and image quality.

Example Two is a Web page with an expanding border that enhances the page without adding a great deal of load time. A small image was sliced and coded in a way that it stretches to fill the available space instead of using a large image.

Example Three is a large animation that was sliced into four sections to isolate the animated areas. This resulted in better animation, improved image quality, and less waiting time to see the image.

Related Links contains additional resources for slicing and optimizing images, creating mouse rollovers, coding table layouts, plus tutorials for slicing in several programs.