Browse DevX
Sign up for e-mail newsletters from DevX


Optimizing Design: Slicing : Page 4

Dividing a larger graphic into smaller pieces is called slicing. It increases your perceived bandwidith.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Other Slicing Applications

The technique of slicing can be applied to many types of graphics for many effects.

Slicing can reduce the file size of an animated GIF.
If only a small part of a large image is animated, why not using slicing to divide up the image into pieces, and reload only the piece or pieces that change during the animation:

Notes: In this example only the sun needs to be animated, if it is isolated and the entire image is built into a table, the resulting file size is much smaller.

As one large animated file the size is 25K.

The individual files that are assembled in the table add up to 6K, a substantial savings.

The sample shows the table with a border=1 so you can see where the slices are.
  1. Slice the large image into several smaller pieces. Make the piece that contains the animation as small as possible.
  2. Save single GIF or JPEG files for each unanimated piece.
  3. Save an animated GIF for the part that has animation.

Slicing can simulate wrapped headlines.

With HTML limitations, pictures, headlines, and text must occupy rectangular spaces that can't overlap or cross over into other rectangular spaces. However, the illusion of a headline that is part of a photograph and at the same time breaks out into the rest of the page can be created by using tables and a sliced image.

Click on the image to see how it divides into slices:

Look at your graphics in new ways to find applications where slicing can work for you.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date