Using Slicing to optimize web graphics

For fast download over the Internet you want to create the smallest possible files. Sometimes you can achieve the best results by exporting part of a graphic as a JPEG (which is best for photographs and areas of complex color changes) and part as a GIF (which is best for areas of flat color). An alternative would be to export detailed parts of the graphic as a 256-color GIF and the other areas as 2-color. Image slicing overview describes the basics of image slicing but this page describes exporting in differing file formats and color depths.

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

The blue & white circle can be exported as a JPEG; the surrounding areas of flat red as a GIF.

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. If you had more areas you wanted to export at high quality you would also name them in the same way.

Second stage: set the export options

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

2. Click to the right of Circle and select the required format (JPEG in this example). The file name is the same as the Name in the Name Gallery. (Changing the file name also changes the name shown in the Name Gallery.)

3. Click Save to save the settings. (This does not save a bitmap at this stage.)

4. Click (wording depends on the format chosen in step 2) and select the required save options (such as color depth). (For more detail on the options in this dialog box, click the Help button.)

5. Click Apply to save these settings. (Again, this does not save a bitmap)

Third 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 for the other parts of the graphic (in this case the red rectangle). For this example of exporting the circle as a JPEG and the rectangle as a GIF, you would select GIF as the file type.

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.) Note that the Previews show the options you select in this dialog box - they do not accurately show the optimized areas.

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):

Image slicing overview has full details of how to use the bitmaps and HTML code on a web page.