HTML tutorials for the rest of us...

GIF Compression Explained

This is not an exact and complete explanation of what goes on in a GIF, but it's close enough for our purposes and gives us the basic idea.

Consider the following image...

If we look closer, we'll find that every image is made up of pixels...

That image is 180 pixels wide by 170 pixels high for a total of 30,600 individual pixels. And, that image contains 3,896 separate colors.

A GIF image can have at most 256 separate colors. So if we convert our image to a 256 color gif, we get the following.

Colors: 256
File size: 6.00 KB

The image is the same size and contains the same number of pixels, but the number of separate colors has been reduced to around 256*.

*Actually, if you wanted to get technical (meaning... at this point I wouldn't worry too much about it), the image actually contains only 224 separate colors. When reducing the image, the graphics application (Paint Shop Pro in this case) reduces the image according to a particular algorithm (formula). It reduces the image to contain at most 256 colors. In this particular instance, the end result of the all the churning and reducing was 224 colors.

We can reduce the number of colors even further and watch the file size go down as well...

Colors: 128
File size: 5.24 KB
Colors: 64
File size: 4.48 KB
Colors: 16
File size: 2.11

Of course, you wouldn't really want to start reducing your images in such a way and to the point where they begin to look bad. This is just to illustrate how GIF compression and optimization works... by reducing the number of separate colors in the image file.

Have a look at one last example. It's an extremely large image... 2800 x 1600 pixels. That's over 4 MILLION separate pixels! Yet the file size is a very modest 37 KB. Why? Because the image only uses two colors. Pretty interesting I'd say.

Related articles you may find interesting... GIF or JPG and Image Compression Examples.