GIF (thing)

What are they?
GIFs are an image format popular on the web able to handle up to 256 colours.

What are the advantages of using GIFs?

• they handle large blocks of colour well – with other image formats, eg jpeg (or jpg), blocks of colour often suffer from noise or dithering.
• they can have a colour defined as transparent allowing you to see the colour of your browser background.
• GIFs can be interlaced – this is where the gif is first displayed as a poor resolution image, and as more data is received, a higher and higher quality image is displayed. On a slow internet connection, interlaced gif gave you an idea of what you were about to see quickly.
• animated gifs – GIFs have the ability to store multiple ‘frames’ in its file which can be displayed one after the other. This allowed the animated gif to be created and which has been used to great (and not so great) effect on the Internet.

What are the disadvantages of using GIFs?

• compression is not overly good – jpegs generally achieve better file sizes
• can only handle 256 colours – as opposed to say jpegs which can handle millions.
• GIF files can suffer from dithering where the format tries to approximate a colour by using two or more colours together - it looks terrible.

How does the compression work?
It is important that you understand how the compression technique works for GIF image files because you can trim your image size down by 50% if you design your GIF image the right way!

GIF image files use the Lempel-Ziv-Welch (LZW) technique of compression. This takes horizontal colour information and stores it as a sequence. For example, say we have an image with red (R) and green (G) colours as represented by the line below:

RRRRRRRRGGGRRRRRRRRR

In simplified terms, the GIF file would store this as R8G3R9. The reduction in file size is achieved because we have only used 6 ‘characters’ to describe the image as opposed to 20 in the original image file. However, the LZW compression technique only really works well when there are bands of colour (ie RGRGRGRGRG will not compress well) and in particular, when there are horizontal bands of the same colour.

As an example, here are the actual differences in file sizes for three different gif images.

• Image 1: Square image, divided in half horizontally. The top colour is red, the bottom colour is white. File size: 1 kb
• Image 2: Square image, divided in half vertically. The left colour is red, the right colour is white. File size: 1.1 kb (already a 10% increase in file size)
• Image 3: Square with a gradient fill from left to right of red to white. File size: 2.2 kb (a 120% increase in file size – this is where you should use a jpeg or png image file)

When should I use GIF images?
You should use GIFs generally when the image has blocks of colour (ie not photographs), when you require transparency (although png files handle transparency as well) or when you require animated files (although you may want to consider other formats like Flash).

Due to copyright issues, it is encouraged to use the PNG format over the GIF format. The PNG is a superior format with more features, but it isn't supported on the older browsers.

Related: JPEG jpg PNG