GIF

What does it stand for?
An abbreviation of ‘Graphic Interchange Format’ which was originally created by CompuServe, usually pronounced with a hard ‘G’, ie gif not jif.

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

GIF in a nutshell: 1) say you want to compress a 2 bit image. (four colors) Lets call the colors a,b,c & d. here's a 13x3 "bitmap:" aaaabbbbaabab ccdaaaaddaaaa ddddbbaaaaccc 2) The LZW compressor starts by making a table with four entries in it, one for each color: 00 a 01 b 10 c 11 d 3) LZW then scans the picture ,left to right - top to bottom, looking for the longest pattern of pixels it cant match to an entry in the table. In this example, it would see "a" first, and then say.. oh yeah, "a" is in the table. what about "aa"??? nope, "aa" isnt in the table! so it puts a (binary) 00 (pattern "a") in the output (compressed) file, and adds a new entry to its table for "aa": 000 a 001 b 010 c 011 d 100 aa 4) then the next new pattern it finds another "aa" which it recognizes this time, so then it tries to find a match for "aaa" no match, so it writes 100 (the code for "aa") to the output file, and then adds an entry for "aaa" to the table. 000 a 001 b 010 c 011 d 100 aa 101 aaa 5) the next new pattern it finds is "ab" so it writes a 00 to the output file ("a") and adds a code for "ab" to its table. 000 a 001 b 010 c 011 d 100 aa 101 aaa 110 ab 6) so at this point, 4 pixels have been encoded, and the output file looks like this: (in binary) 0010000 which is seven bits. Uncompressed, those 4 pixels "aaaa" would take 8 bits. So already we have saved a bit! this process is continued for the rest of the image. it works well on large, heavily patterned data sets.

The people who originally designed the format pronounced it "jif", though they didn't say in the official specs. If you want to get really picky, go stick your head in a bucket. Either works, people will understand you. (They're laughing on the inside, of course ;)

There are two versions of the GIF file format, GIF87a and GIF89a. The important differences are that 89a added support for animation and transparency. A few other things were also added, like the ability to embed application specific data in separate blocks.

GIF is a lossless compression format, unless you try to encode a truecolor image, but that's your own fault.

The general rule to GIF vs JPEG is to use GIF for images that use few colors with sharp breaks (high frequency component) and use JPEG with photograph-like images that have many colors with smoother transitions (lower frequency).

You can tell a GIF file from its content by looking at the first 6 bytes, which will either be "GIF87a" or "GIF89a". This is the header.

A GIF file consists of that header, a "Logical Screen Descriptor", a trailer, and a number of optional blocks which probably include things like image data, a color table, animation info, etc.

Gif (?), conj. [AS. See If.]

If.

[Obs.]

⇒ Gif is the old form of if, and frequently occurs in the earlier English writers. See If.

 

© Webster 1913.