Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Advanced GIF optimization

Saturday, March 15th, 2014 by Servage

222We have already discussed about basic GIF optimisation techniques in the previous articles. Here we will be discussing about some advanced GIF Optimisation Techniques.

When the colors in an image are reduced to a specific palette, the colors that are not in that palette get approximated by dithering. Dithering is a speckle pattern that results when palette colors are mixed to simulate an unavailable color.

In photographic images, dithering is not a problem and can even be beneficial; however, dithering in flat color areas is usually distracting and undesirable. In terms of optimization, dithering is undesirable because the speckles disrupt otherwise smooth areas of color. Those stray speckles stand in the way of GIF compression and result in larger files.

One way to shave extra bytes off a GIF is to limit the amount of dithering. Again, nearly all GIF creation tools allow you to turn dithering on and off. Photoshop and Fireworks go one step further by allowing you to set the specific amount of dithering on a sliding scale. You can even preview the results of the dither setting, so you can decide at which point the degradation in image quality is not worth the file size savings. In images with smooth color gradients, turning dithering off results in unacceptable banding and blotches.

Using the Lossy filter

The final optimization setting in the Save for Web dialog box is. In Fireworks, it is called Loss. This setting allows the program to selectively throw away data in order to reduce the file size. The higher the setting, the more data is discarded. Depending on the image, you can apply a loss value of 5% to 20% without seriously degrading the image. The example image shows the results of applying Photoshop’s Lossy setting to the barn image.

At higher settings, images tend to look windswept and blown apart. This technique works best for continuous tone art (but then, images that are all continuous tone should probably be saved as JPEGs anyway). You might try playing with loss settings on an image with a combination of flat and photographic content.

222 22

Designing for GIF compression

Now that you’ve seen how high bit depths and dithering bloat GIF file sizes, you have a good context for my next tip. Before you even get to the point of making optimization settings, you can be proactive about optimizing your graphics by designing them to compress well in the first place.

Keep it flat

I’ve found that as a web designer, I’ve changed my illustration style to match the medium. In graphics where I might have used a gradient blend, I now opt for a flat color. In most cases, it works just as well, and it doesn’t introduce unflattering banding and dithering or drive up the file size. You may also choose to replace areas of photos with subtle blends, such as a blue sky, with flat colors if you need to save them as GIFs (otherwise, the JPEG format may be better).

22222        222222

Advanced GIF optimization, 3.7 out of 5 based on 3 ratings
Categories: Guides & Tutorials


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.