| Why Slice? | |
Introduction > Slicing Example One
This is a splash screen I created for an imaginary site. The layout was assembled in ImageReady, exported as an HTML page, and then the HTML was further tweaked in a Web page editor. In this example, slicing allowed me to create mouse rollovers, make portions of the image clickable, and strike a nice balance between file size and image quality.
|
||
|
||
Here is a reduced screen shot of the layout as displayed in ImageReady, showing how the image slices were defined. I'll explain the reasons behind each of these slices below.
It's a good general rule that the ideal size of any individual Web page should not exceed 60-100 KB. The Web page in this example is approximately 66 KB; quite small for a page primarily consisting of graphics, yet the image quality is still very good. If this layout had been saved as a single GIF the file size would have been over 110KB. As a single JPEG, I could get it below 66KB, but the text areas would have become very blurry and the solid areas would have shifted in color. (Whenever precise color matching is important, it's a bad idea to save in the JPEG format.) And, of course, saving the layout as a single image does not allow us to create rollovers and clickable areas. (Move you mouse over the text along the left side of the example page to see the rollover effect.)
Here's a breakdown on the individual image slices:
 |
Slice 01 - 2.62KB GIF, 16 colors, 100% diffussion dithering. In order to preserve the crisp text, this section of the image was saved as a GIF. |
 |
Slice 02 - 12.1 KB GIF, 128 colors, 100% diffussion dithering. This section also has text, so the GIF format was used. However, in order to keep the background from dithering, the colors had to be increased to 128. |
 |
Slice 03 - 18.75KB JPEG, Optimized, Quality 50. As a continuous tone photo, this section was best suited as a JPEG. By bringing the quality down to 50, I was able to get the file size fairly small. Going any lower on the quality resulted in the appearance of compression artifacts in the image. |
 |
Slice 04-08 Rollover slices, 500-1500 bytes each. GIF, 16 colors, no dithering. ImageReady only allows you to use one setting for both the 'normal' and 'over' states on rollover slices. Because of this, I had to use 16 colors in order to preserve the quality of the graphic in the 'over' image. However, after exporting the slices, I opened the 'normal' images and reduced them to 8 colors which cut the total page size down by another couple Kbytes. The lesson here is that while software can be very effective in cutting down on the time it takes for certain tasks, there's still some things that can be improved upon with human intervention. |
 |
Slice 09 - 18.37KB GIF, 256 colors, 100% diffussion dithering. GIF was used here to keep the text crisp. I would have liked to have gone smaller with this section, but in order to keep a seam from appearing, I could not reduce the colors below 256. |
 |
Slice 10 - 2.17KB GIF, 128 colors, 100% diffussion dithering. GIF was used here because of the text and also because the gradient in the page curl effect looked horrible as a JPEG. This was made a separate section in order to make it it a link. |
I hope this helped you understand a bit more about why to slice, and how to properly optimize each sliced section. If you're still unsure about when to choose GIF or JPEG and which settings you should use for each format, keep experimenting. In time it will come more naturally, but as you're learning, it's extremely helpful to use software that allows you to preview and compare images at various settings. If your software does not include this feature, there is a very good plug-in that will allow you to do this called Smart Saver Pro from Ulead Systems.
In the next two examples, you can see how slicing alows us to use a small image to fill a larger space, and how slicing can improve a large animation.
Example Two | Example Three | Related Links
~
Sue Chastain
Questions? Comments? Post to
the Forum!
More
Features
