Smart Computing Article - How To . . . Use Image Slicing

Subscribe Today | Contact Us | Register Now

Home | Tech Support | Q&A Board | Article Search | Subscribe & Shop

How To . . . Use Image Slicing

Email This

Print This
View My Personal Library

Step By Step April 2001 • Vol.7 Issue 4 Page(s) 85-86 in print issue	Add To My Personal Library
How To . . . Use Image Slicing

Time is of the essence. We've all heard the saying, but it's very true when it comes to the Web. You have probably gone to a Web site that seemed to take forever to load, and as a designer, you've probably heard the experts warn against slowing down your pages with large graphics.

There are techniques you can use, however, that will allow you to use sizable graphics on your Web pages while still making it appear as though they are loading quickly. We'll show you how you can use the image slicing technique when using large images on your Web pages so visitors don't get impatient and leave before they've had a chance to see the full effect of your site.

Cut It Out. Image slicing is pretty simple in concept and in practice. Instead of placing one giant image on your Web page, you can use an image-editing program, such as Adobe Photoshop, Paint Shop Pro, or even Microsoft Paint, to cut the image into several smaller pieces. Then you can use simple HTML table coding to rebuild the image on your Web page.

Slicing the image won't necessarily make it load any faster, but when bits and pieces of the image load and display quickly, it appears to the visitor as though the page is loading quickly. In fact, it may actually increase the load time slightly, but the perception by the user is that it is faster.

Image Is Everything. The benefits of image slicing make sense when we consider how data transfer takes place on the Internet. Data is transported through the Internet in a series of small packets, which are then reassembled when they all arrive at the final destination. When a Web browser is trying to load a large image, it must wait for all the data to arrive before any of it is displayed, which can be frustrating to the visitor.

Figure 1. The colorblock used to demonstrate the image slicing exercise consists of four colors. Although there are actually four pieces of the image, the complete image will look whole when it is reconstructed with HTML table tags on the Web page.

However, when the image is sliced into several smaller pieces, there are smaller data packets that must arrive and reassemble before the image is displayed. So while the entire image might not appear in its entirety at once, when visitors see parts of the image appear on the page, they are less likely to become impatient and leave the site before the image is loaded.

You need to be careful when using image slicing, though, as it is possible to increase the download time of your Web page. Web browsers typically download data in multiple streams by making multiple data requests at the same time. Most Web browsers today typically handle up to four simultaneous streams of data. However, each data request consists of four parts. First, the Web browser establishes that the server where the data is stored is available. Then the serving server confirms that it is available. Third, the requested data is sent from the server, and finally the connection is closed. These four steps are repeated for each data packet, so each time this process is carried out, it increases the total download time for the page.

If You Rebuild It . . . The theory of image slicing is logical. You're not making the image any smaller, you're just making it seem like your Web page is loading faster.

While many image-editing programs and HTML editors offer built-in features for image slicing, you really don't need to go out and buy any additional software. We'll show you how to slice any image using any image-editing program and how to reassemble the image in a Web page using basic HTML table tags.

First, take your image and open it using an image-editing program. For this exercise, we are going to take a simple block of colors, called Colorblock.jpg, which we will open and edit using Adobe Photoshop. (See Figure 1.)

Using the cropping tool, crop the image so that just one color remains by itself. We have cropped the red piece, so we will save it as Red.jpg. Now open the original image (Colorblock.jpg) and again use the cropping tool to crop the second color. This time we will crop so that only the blue part remains, which we will save as Blue.jpg. Do this to each color in the colorblock, each time saving it as its respective color name. When finished, you will have four images: Red.jpg, Blue.jpg, Green.jpg, and Yellow.jpg. ( NOTE: Because HTML tables consist only of straight edges, you will want to crop your image in square or rectangular shapes so that the pieces of the image also have straight edges.)

Once you've sliced the image using your image-editing program, your next step is to rebuild it in your Web page using HTML table tags. Below is the HTML coding used to reconstruct the colorblock using the five image pieces we sliced apart earlier.

<table border="0" cellspacing="0" cellpadding="0" rowspacing=0 rowpadding=0>
<tr>
<td>
<img src="red.jpg">
</td>
<td>
<img src="blue.jpg"><br>
<img src="green.jpg"><br>
<img src="yellow.jpg">
</td>
</tr>
</table>

Using Table Tags. When coding your table, start by opening the table with the open <table> tag. Here you will need to include the values for the table. The border value, as well as the value of all spacing and padding tags should be set to "0". Any value other than "0" will result in extra space between the pieces of your image.

Figure 2. Each color in the colorblock is cropped and saved as an individual file. The image is then reconstructed using HTML table tags.

Open the first table row and column using the <tr> and <td> tags, respectively. In the above example, we placed the red image in this first column.

Since the red image is longer than the remaining pieces, we will place those in the second column. The </td> tag tells the browser to end the first column and the <td> tag tells it to begin a second column.

Next, we added the remaining color images, separated by <br> tags, which tell the browser to place the images one atop the next. Had we neglected to include the <br> tag after each image, the images would be placed next to each other in a long line instead on top of each other.

Once all the images that need to be in the second column have been added, the </td> tag tells the browser to close the column. If there are no more rows, as is the case in our exercise, </tr> is used to tell the browser to end the row.

Use your image-editing tool to crop the different pieces of the image. Here we used Adobe Photoshop to crop the red part of the colorblock.

Since there will not be any additional rows, the </table> tag is used to close the table and to tell the browser that there is nothing more in the table.

Pros & Cons. As with most design techniques, there are advantages and disadvantages to using image slicing. We'll point out some of both to help you determine which situations are most appropriate for using the technique.

One of the biggest advantages to image slicing, of course, is that it lets you optimize your site with the perception of quick-loading graphics. In addition, it gives the appearance of layering without using DHTML (Dynamic HTML) layers. It also allows for more flexibility for using images and links, rather than limiting you to the use of image maps with large images. Finally, using image slicing provides more options when using rollover images (images that appear only when the user places the mouse over them) and navigational tools.

Of course, image slicing also has its drawbacks. One of these is that you run the risk of pieces of your image not displaying properly. The more pieces an image has, the more data packets are sent and reassembled, and the more likely it is that some pieces will not make it through the process. Another thing to keep in mind is that image slicing can increase the overall size of your pages, which may or may not affect Web storage issues for your site. You can also count on it adding significantly to the amount of time required to develop and maintain the site. Finally, remember that image slicing can actually increase the load time of your Web page, even though it's perceived by the visitor to be loading quickly.

Image slicing is a very simple idea. Just cut your image into smaller pieces, then reconstruct the image using HTML table tags. The next time a visitor sees your Web page, they will see parts of the image load piece-by-piece, rather than waiting for one large image to load. Be careful in your slicing, though, as too many cuts can hinder rather than help your pages.

by Meredith Witulski

Want more information about a topic you found of interest while reading this article? Type a word or phrase that identifies the topic and click "Search" to find relevant articles from within our editorial database.

Home Copyright & Legal Information Privacy Policy Site Map Contact Us