Optimizing GIFs - Get The Most Out Of Your Kilobytes

Monday, October 29th, 2007

Trackback

A little over a week ago, I wrote an article on optimizing JPEGs (JPGs). This week, I’m going to follow up with an article on optimizing your GIF files.

If you’re unfamiliar with GIFs, GIFs are typically used for low color images. Usually, if the image is a photo (taken with a camera), you won’t use a GIF and if you were to use something computer generated (such as a tab for navigation), you would use a GIF.

GIFs are mainly based on color channels. A GIF can have up to 256 color channels. Each color channel stores one color to be used in the image. Given that information, you can see how tricky it can be to have gradients or shadows if you’ve only got 256 colors to work with.

Let’s say we had the following image of a Photoshop toolbar. It’s currently saved at an ultra-high quality JPEG (33kb).

GIF Pre Optimization

Photoshop, in my opinion, is the best tool to optimize images so I’m going to use that in my example. Go to File>Save For Web & Devices. Your window should look like this:

GIF Window

9.2 kilobytes is a small filesize for a setting picked at random, let’s see how low we can get it.

Different Ways To Chop Down Your GIF Filesize

Colors
If you’re looking for an ultra quick export, you can select any of the pre-determined values for colors. Go between the colors until you have a result you can live with. Later on in the article, we’ll look at further trimming down the color channels.

Lossiness
Using the Lossy slider in the Save For Web & Devices window, you can gradually bringing up the value until you notice a significant difference. Using this technique, you can likely shave off a few kilobytes.

TIP: You can use masks to have different levels of Lossiness in the same picture. I show you how to do this in the article on optimizing JPEGs.

Get Rid of Similar Color Channels
Beside your color table, hit the blue arrow and select Sort By Luminance. Here, you can manually delete channels you feel are too similar to another.

TIP: You can shave off a decent chunk of filesize if you delete a large color channel that is similar to another large color channel and Photoshop merges them together.

Get Rid of Lesser Used Color Channels
Beside your color table, hit the blue arrow and select Sort By Popularity. Here, you can manually delete channels that are barely used.

Using those tips, I got the original image down to 6.8kb. It doesn’t look too bad, does it? GIF Optimization Result