Slicing Your Images

There are a number of good reasons why slicing up your images can help your web page design. Sliced images can give your pages a faster download time. Simply, it takes less time to send several smaller images than it takes to send one large one.

Slicing comes in handy when using more than one file format in an image. There are two main image formats on the web. In practice, drawn images or flat colors look best as GIF, while photographic images are best as JPEG. Quite often images have a mixture of flat colors and photographic areas. An easy solution is to save some parts as GIF and others as JPEG. You must slice images to create JavaScript behaviors such as Rollovers and Swapping Images. By slicing up a large image, you can also make the smaller images into active links. This way one image can have a number of links and appear as a working Image Map.

Slice And Dice

Both Macromedia's Fireworks and Adobe ImageReady have functions that export images as a series of numbered graphics, along with the HTML table code to hold them together.

To do this manually, you need to be familiar with an image program like Adobe Photoshop or Paint Shop Pro to create the graphics and then write the code yourself.

Using ImageReady

Open your image and select View > Rulers. Drag down a ruler guide into position on the image where you intend to slice. Drag down more guides, until you have the image divided into a grid.

Select the format and optimization values with the Optimize palette and Optimize preview. Save the file using File > Save Optimized As. This opens the Save As dialog box where you can check the boxes next to Save HTML File and Slice Along Guides.

ImageReady creates your graphics numbered by row and column, as well as the table code to hold them together. All you have to do is copy and paste it into your own HTML file.