Slicing a Graphic Image into Table Cells to Create a Quick Loading Web Graphic
Tables also let you assemble graphic images to create the appearance of a single graphic. Dividing a picture into pieces and placing the pieces into separate table cells allow the Web browser to retrieve and display the image faster than it could if the picture were a single, large file. The speed savings depends on the colors within the sliced images. Slices containing fewer colors, such as a bright blue sky, create smaller file sizes than slices that contain more colors.
Say, for example, that you have a large graphic on a Web page, and the large file size of the image creates an unacceptably long download time for the page. The image in question is a landscape photograph containing large areas of solid blue sky, named big_sky.jpg.
If you divide the large graphics image into pieces and save each of these pieces in a separate JPEG- formatted file on disk, you can take advantage of the relationship between file size and image color depth. When you save a graphics image in the JPEG format, your graphics program selects a compression method based on the amount of color contained in the image. However, no matter the compression method used, the more color in the picture, the larger the size of the JPEG file the graphics program creates.
If you divide a large graphics image into pieces, the graphics program can select a different compression method for different parts or slices of the image. The program will save those slices with less color in smaller-size JPEG files, and those slices with more color in larger-size JPEG files. However, given a picture with varying amounts of colors in different parts of the image, the sum of the sizes of the sliced JPEG files will be less than the number of bytes required to store the picture in a single JPEG file. Therefore, the Web browser will be able to load and display all of the file slices faster than it could load the single file, because the browser has to retrieve less data from the file server. Remember, when you put the slices (that is, the pieces) of a picture into the cells of a table with zero-width (invisible) borders, the table holds the pieces next to each other (without a space in between) such that they appear as a single, larger image.
When the table loads the image onto the Web page, it loads faster because the browser has less information to download from the server. Slicing an image requires a graphic-editing program such as Adobe ImageReady. It is the only program currently on the market that will automatically slice a photographic image, optimize each slice according to the image’s available colors, and save the sliced images into a separate folder.