Why Slice?

More of this Feature • Introduction • Example One • Example Three • Related Links

Join the Discussion "As I understand it, image slicing is useful for breaking up huge images so that the individual pieces will load more quickly than the whole large one." - Brenda

Introduction > Slicing Example Two

This is a Web page with an expanding border that enhances the page without adding a great deal of load time. The border image was created image ImageReady, then selected slices were exported and reassembled in an HTML table.

Here you can see the entire ImageReady document with guidelines to indicate how the image was sliced. Only the 8 numbered sections were saved from ImageReady. Due to the way ImageReady exports HTML, it was easier to save just the slices I needed and create the table code from scratch in an HTML editor.

Each section was saved as a 16-color dithered GIF. The entire page (including HTML) is only 4.62 KB. Here's a breakdown of file sizes for each of the images in this example:

231 bytes	182 bytes	236 bytes
257 bytes	In the HTML, the four side images are stretched to 100% height or width to fill the available space. Here you can see the actual size.	299 bytes
243 bytes	240 bytes	260 bytes

Here's the table code to assemble the pieces:

Example One | Example Three | Related Links

Related Information:

Using Tables to Do Page Layout
HTML Guide Jennifer Kyrnin has tips for using tables for your Web page layouts.

Latin Placeholder Text
Get the "Lorem ipsum dolor" text from About's Desktop Publishing Guide.

Sue Chastain Your Guide to Graphics Software Questions? Comments? Post to the Forum! More Features