1. Technology

Your suggestion is on its way!

An email with a link to:

http://graphicssoft.about.com/library/weekly/aa000808d.htm

was emailed to:

Thanks for sharing About.com with others!

Why Slice?
Effective Image Slicing - Example Three
 More of this Feature
• Introduction
• Example One
• Example Two
• Related Links
 
 Join the Discussion
"As I understand it, image slicing is useful for breaking up huge images so that the individual pieces will load more quickly than the whole large one."
- Brenda
 

Introduction > Slicing Example Three

This is a rather large image that was sliced into four sections to isolate the animated areas of the image.

The total file size of all four images combined is 21.5KB. Here's a breakdown of each of the sections:


3.5KB GIF, 32 colors, dithered.

7.4KB GIF, 128 colors, dithered.

8KB GIF, 128 colors, dithered.

2.7KB GIF, 32 colors, dithered.

If this image had been saved as a single GIF we would have had to increase the color depth to 256 colors to avoid dithering. Even at 256 colors, there would have been some dithering, and the file size would have increased to 25KB. That may not seem like a lot of savings, but there are other advantages to slicing in this scenario:

  1. Better image quality, less dithering
  2. The smaller sections will load first so your visitors will see something happening instead of staring at a blank space while the full 25KB GIF loads.
  3. By separating the two animated areas, I was able to tweak the timing of the animation and reduce the number of frames to get better results.

Here's how it was done:

  1. The image was initially layed out in a single ImageReady file. Each twinkle light was positioned on its own layer, but not yet animated.
  2. The slices were defined for the four sections.
  3. Two duplicates of the image were created.
  4. In each of the duplicates, I converted an animation slice to a selection, then cropped the image to the selection, discarding the cropped areas. This left the layers containing the twinkle lights intact.
  5. With the animated sections now in separate images, I was able to create the animation frames.
  6. The two non-animated slices were optimized and exported from the original file.
  7. The animated sections were optimized and exported from each of the duplicate images.

The four sections were then reassembled in a HTML table. Here's the table code to assemble the section:

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="twilight_01.gif" width="255" height="74"><img src="twilight_02.gif" width="92" height="74"></td>
</tr>
<tr>
<td><img src="twilight_03.gif" width="109" height="76"><img src="twilight_04.gif" width="238" height="76"></td>
</tr>
</table>

Example One | Example Two | Related Links

Related Information:

Tips for Optimizing Animations
Tips for optimizing animations for the Web.

Animation
Guide Tom Franks keeps you up to date with the latest tools and developments for animators.

Sue Chastain
Your Guide to Graphics Software
Questions? Comments? Post to the Forum!

More Features

You can opt-out at any time. Please refer to our privacy policy for contact information.

Discuss in my forum

©2014 About.com. All rights reserved.