Image types and their compression: 3. the gif

This is the last of the image types I want to write about. If you are looking for an introduction please go back to the first post.

3. the gif image

The gif file is a real antique of the internet as it has been around since 1987. Its name is an abbreviation of “Graphics Interchange Format” [Wiki link] and it was invented by CompuServe as a cross-platform graphic. At its conception the 8-bit format and resulting limitation to only 256 colours was still well ahead of mainstream computing.

It probably reached the peak of its use in the mid to late 90s when almost every banner ad was created in this format, and thousands of animated gifs annoyed every visitor at low quality sites and bulletin boards. Here is a more “moderate” example; if you would like to see others feel free to google “gif animation”.

As soon as bandwidth became less of a constraint the inclusion of photographic pictures in digital media became popular. But the gif format is not well suited for photos due to its compression characteristics and low count of colour shades.

photo as gif, nearest web safe colour

photo as gif, nearest web safe colour (21kb)

photo as gif, dithered colour

photo saved as gif, dithered colour (47kb)

photo as gif, dithered and optimised colour

photo as gif, dithered and optimised colour (71kb)

same photo as jpg image

the same photo as jpg image (compressed only 21kb!)

As you can see the gif format doesn’t handle photos well (unless you like the strange “web safe” effect of the top image). The jpg format is best suited for photos!

But all is not lost: the strength of gifs are large areas of continuous colour and clear text, hence the gif still holds a niche in web design for some logos and where a graphic replaces header text. Since standard web design only allows for the inclusion of a handful of cross-platform and browser compliant typefaces a small gif with some text is a simple method to introduce a more personal typeface into your page. (More about typefaces in future posts!)

Here’s another feature of the gif format: you can set the colour count to less than the maximum 256, eg. the above image contains only 16 colours and resulted in a much smaller file size. I couldn’t save it as a 2-colour gif [black & white] because the writing looked too pixelated; I needed a few more grey shades to smooth the edges.

When you want to create such a text header gif another feature of this format is useful: you can specify a transparent background colour for the file so you can display your image on any background. This process requires a little experimenting if you do it for the first time, since you don’t want to end up with a few left over pixels of your gif‘s background, yet soon it gets easy. It is also somewhat flawed if you introduce extra effects like a dropshadow, which the gif cannot display very well. Due to its limitation to 256 colours you will lose the finer grading shades of your dropshadow; the png format is better suited for these images. Yet, if the image consists of plain colour on another plain colour the gif format is still a good choice.

Personally I would allow the gif format another niche as the “poor (wo)man’s flash” replacement. The option to animate a gif can come in handy for specific uses, eg. where you want to highlight a new item/section, or a call to action, or even in some technical context, eg. where you would like to show different viewing angles of a specific item (like the 4 sides of a car). an animated Beetle gifJust keep their use to a minimum and the animation relatively subtle.  Most software to create flash files [Wiki link] is rather expensive and involves a steep learning curve. There’s no other format around to create simple animations.

To summarise:

1. gif images are 8 bit and limited to 256 colours.

2. the gif format is well suited for images containing continuous colour, without gradients and other effects which push the colour depth beyond 256 shades (in which case you would use the png).

3. you can introduce transparency, eg. to make the background disappear.

4. a gif can be animated! This is (apart from more complex flash animations) the only image format to offer this option.

My next post will show a few more side-by-side comparisons of all three image formats and their compression.

Short link to this post:

Add to FacebookAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to TwitterAdd to TechnoratiAdd to Yahoo BuzzAdd to Newsvine


One Response to Image types and their compression: 3. the gif

  1. Buzzopia says:

    My brother suggested I might like this website. He was entirely right. This post actually made my day. You can’t imagine just how much time I had spent for this info! Thanks!…

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: