Image slicing gives us a good oportunity to greatly decrease overall size of the images and get nice balance between file size and image quality.

Let's see how to optimize the following image and reduce its overall file size. This is typical complex image containing solid colored areas with text information as well as full-colored areas.

Initial image (png-8, 256 colors, 97,44 K) click on it to view full size

To compress that image we used .png format giving the best compression ratio with saving color information. If this image had been saved as a single GIF the file size would have been 128.6 K. As a single JPEG, it could be 66,5 K with quality 30, but the text areas would have become very blurry and the solid areas would have shifted in color.

1. Create slice layout

First step of optimization is creating suitable slice layout. We should allocate the areas with homogeneous content, specific for certain graphic format. So full-colored continuous tone images will be saved better as JPEG; solid colored areas with text elements will be saved better as GIF or PNG; and empty solid colored areas may be discarded and replaced by html table cells of the same color.

In our case it is evident to divide the image into 5 segments (central continuous tone image and 4 side images). To create such layout we should follow these steps:

1) Draw two vertical and two horizontal splitting lines

2) Holding SHIFT pressed, select tree top slices. Then right-click on them and choose Merge Slices command from pop-up menu.

3) Do the same with three bottom slices. The result of these operations is below.

2. Select appropriate slice format

Set desirable settings for each format in Settings window. We set

JPEG - Progressive, 70% quality
GIF - 256 colors, LZW, Nearest
Then we pressed Optimize button and automatic slice format selection has given us the following results:

Slice 1 - GIF, 12.4 K;
Slice 2 - PNG, 2.12 K;
Slice 3 - PNG, 5.76 K;
Slice 4 - PNG, 0.5 K;
Slice 5 - JPEG, 28.3 K.

Sliced image (49,2 K) click on it to view full size

As you can see we reduced file size of the image twice without any quality losses.