Image Slicing Overview

Large, complex graphics for web pages can produce large files, which take a long time to download over the Internet. You can "slice" the image into sections, which can download separately.

Photoshop and Macromedia Fireworks users may prefer this alternative method as it is closer to how these packages slice images.

To show how to slice images, we'll use this graphic (in practice you would not slice a simple image like this):

Another use of slicing is optimization. The blue and white circle contains more colors than the surrounding areas of flat red. You can optimize the graphic by exporting just the high detail area (the circle) as a JPEG or 256-color GIF and the other areas as a 2-color GIF. This minimizes the amount of data to download. A separate page describes optimization.

First stage: name the circle

Named objects control slicing so give the circle a Name. Use either the Name Gallery or New name on the Selector Tool Infobar. For this example we'll use the name Circle. (For more complicated images you might name more objects.)

Second stage: export the graphic in slices

You do not need to specify how to slice the image as Xara LX does this automatically from the information in the Name Gallery.

1. Select both the red rectangle and the blue circle - see Selecting objects.

2. Select Export image in slices on the File menu.

3. Select the file format (usually GIF or JPEG for Internet Graphics).

4. The file name is the HTML file that contains the HTML code for the sliced image. You can change the file name if required.

5. Click Save.

6. Select the required save options. (For more detail on the options in this dialog box, click the Help button.)

7. Click Export to save the sliced image.

8. You can now view the exported bitmaps in your browser.

The example is sliced like this (the slices has been separated so you can see them):

If you don't want some named objects to slice:

1. In the drop-down list in the Name Gallery select Slices.

2. Checked Names slice the graphic - if necessary, unselect the check box.

Unchecked Names have no effect on other objects. (That is, they do not affect slicing.)

Using the graphics and HTML code on a web page

To include the sliced image on a web page you need to copy part of the HTML test page into the web page. (Cut-and-paste is the easiest way.) This description assumes you know how to edit a web page and have a basic knowledge of HTML. You may also need to copy the bitmap files to your web server.

1. In a text editor, open the .htm file created when you exported the bitmaps.

2. Technical Note: the sliced image is contained in a Table. This ensures correct formatting.

Copy the entire Table into your web page where you want the image to appear. The Table starts

<table name="XaraTable"...

and ends

</table>

3. We recommend copying the bitmaps to the same folder as the web page. If you use a different folder to the web page, you need to edit the SRC attributes to point to the correct folder.

4. Copy the bitmaps to your web site. The bitmaps have the same name as used in the Name Gallery. (In this example circle.gif)

There may be other bitmaps with names such as r2c1.gif plus a file called shim.gif. Copy all these to your web site. Technical note: Shim.gif is a dummy bitmap used for padding.