Skip to Content
Skip to Table of Contents

← Previous Article Next Article →

ATPM 6.08
August 2000


How To



Download ATPM 6.08

Choose a format:

Graphics and the Internet

by Grant Osborne,

The GIF File Format

Before we start, here’s a plea to all of you ATPMers out there. In a few months time I will have come to the end of my planned Graphics and the Internet columns. So far we’ve looked at copyright, obtaining images, JPEGs, Banners, and (below) GIFs. In the coming months I’m going to be looking at GIF animation, things that look really bad on Web pages, and Web page layout tips. After that, the ball is in your court. So, if you could e-mail any questions you have or articles you’d like to see about Web graphics, I’d be extremely grateful.

Okay then, sorry about that interruption. On with the show.

GIFs are everywhere on the Web. They’re like the ‘Moby’ of Internet graphics. In the same way that you can’t turn on the TV without hearing a Moby song on a commercial, you can’t surf the Web without seeing a GIF.

What’s a GIF?

So, what are they all about? Why do we need them? Why can’t we use JPEGs for everything?

GIF stands for Graphics Interchange Format, and like most acronyms, that doesn’t explain what it’s for particularly well. The GIF was invented by CompuServe, who needed a universal format for graphics. The compression algorithm for GIFs is owned by Unisys, and anyone who produces software that creates GIFs has to obtain a license from Unisys to be able to do so. Luckily, we don’t need licenses to make GIF files, so we can carry on as we were, without the fear of Unisys breathing down our necks.

If you read our article the other month on JPEGs you may remember that I said a JPEG suffers from ‘lossy compression,’ which basically means the more you shrink it, the more the quality of the image deteriorates. GIFs on the other hand, use a lossless compression algorithm, so that you don’t lose any information when you save the file.

JPEGs vs. GIFs

Remember the JPEG article, when we said that JPEGs were best for photos? If not, go back and read that article now.

GIFs are good for: buttons, banners, text (in graphic form, rather than plain ol’ HTML), and simplistic images.

GIFs come in two flavors, one is the GIF87a and the other is the GIF89a. Most graphics packages give you the choice of which you wish to save as. The main difference is that 89a supports animation, and 87a doesn’t. Most browsers will read 89a now, so unless you have reason to do otherwise, stick to 89a.

Another difference between GIFs and JPEGs is the number of colors they allow in an image. JPEG images allow, in theory, 16.7 million colors. (I say “in theory” as you’d need to have a pretty large image to just fit one of each color.) GIF images allow only 256 colors. Remember this as we’ll come back to this restriction later.

The other feature that JPEGs lack, but GIFs have, is the transparency feature. This allows you to select a color to be transparent, and when you insert it into your Web page, the background graphic shows through.

Creating GIFs

When creating GIFs, it’s worth remembering that they will only allow 256 colors. If you’re creating your GIF image in anything more than 256 colors, when you save your image as a GIF, your Mac has to get rid of any extra colors used, making your image look all messed up. If, when you start creating your image, you instruct your graphics program to only use 256 colors, then you’ll be fine.

Bear in mind that a GIF with fewer colors and smaller physical size will end up with a smaller file size—very important for Web graphics. If a file is small it takes less time to download. The quicker your Web page takes to download, the less likely visitors will get bored and go elsewhere.

Saving GIFs

When you save an image as a GIF, you’ll usually get several options, although sometimes you’ll have to click on a button called ‘Advanced’ or ‘Options’ depending on what program you’re using.

Save as 87a or 89a
87a was the original version of GIF. 89a was a revision that allowed, amongst other things, animation and interlacing. The default is normally 89a, as this is widely supported.
Optimize Colors
Choosing this option will throw away any unused or little-used colors. Remember fewer colors = smaller file size.
Fewer Colors

Similar to the above option, but you get to choose how many colors your image will be saved with. Normally you’ll be able to preview the image so you can see if it looks any good with, for example, 24 colors. When you reduce the colors, the software recreates the missing colors by dithering two colors together. Look at the example below—by mixing red and blue we get a purple color.

Row Order (interlaced or normal)
By choosing ‘interlaced’ over ‘normal’ your image will appear in a browser gradually as it is loaded, giving the viewer something to look at a lot quicker.
Use Exact Colors
If your image has 256 colors or fewer, then choosing this option will save your colors as you intended them.
Use System Colors
Choosing this option forces your image to take on a set of 216 predefined colors. This is called a Web-safe palette. More on this later.
Use Adaptive Colors
Choosing Adaptive gives the best results if the Exact option is unavailable. The Adaptive option chooses the colors for your image based on its existing colors. Say, for example, you have a picture of the sea on a sunny day. The Adaptive palette would mainly consist of blues. When a GIF with an adaptive palette is shown on a Web page with another GIF image, the browser will adapt the palette to give the best results for both images. This isn’t always needed with today’s 24-bit monitors, though.

Transparent GIFs

The trouble with computer graphics is that they are so square. You can get around this limitation by making part of the image transparent. When you put this image on a Web page with a patterned background, you can see the background through the image. Here’s an example.


GIF Without Transparency


GIF With Transparency

Check out your manuals and help files to find out how to use transparency with your graphics software. Most of the time it’s part of the Advanced Saving Options and you can choose which color(s) to make transparent.


One of the problems of transparent GIFs is that you can only have full transparency or no transparency. There’s no middle ground, so you can’t have a pixel that has 50% opacity. This can cause a problem when you show a GIF on a dark-patterned background.

Most applications have anti-aliasing features. This stops your images looking jagged by placing mid-color pixels to ‘blend’ away the sharp edges. On the image above, the anti-aliasing puts different shades of gray between the black and white to smooth the edge.


With Anti-Aliasing


Without Anti-Aliasing

However, when we put the GIF on a darker background, the transparency feature just takes away the pure white background, and leaves all that anti-aliasing stuff behind, giving us a stupid looking white edge glow.


How can we avoid this problem? Well, there is a simple solution. You need to use a graphics package that supports layers. (I’ve used Adobe Photoshop, but I don’t like to specify particular software as not everyone has the same programs. Corel Paint or Photo Deluxe will do the same job.)

Web-Safe Colors

Earlier on in the article I mentioned Web-safe colors. I’m not going to spend a long time on these as they are really, really boring, and a quick search on Yahoo! will give you more than enough information to send you to sleep.

Basically there are 216 “safe” colors that will look the same on Windows as they will on Mac OS, regardless of whether the user’s computer has 256 colors or millions and millions. Any colors which aren’t part of this exclusive club could look dithered.

216 sounds like quite a lot of colors, but wait until you see the choice you get. It’s the modern equivalent of trying to paint a picture of a woodland scene with a paint box that has 10 different pinks, 10 different blues, and not much else. If you want your images to look good on all systems, stick with Web-safe colors. You can set most graphics software to limit you to just using these colors.


The Web-Safe Palette

Shrinking the Size of GIFs

If you want to reduce the size of a GIF, you can either visit the GIFcruncher Web site or you can do it by hand.

To reduce the size by hand, it pays to know how GIF compression works. Look at the two images below. They are both the same image but one is rotated 90 degrees.


The image with the horizontal stripes is 4.7K and the image with vertical stripes is 5.5K. That’s a whole 0.8K difference.

Why is this? Well, when it saves the image, the compression algorithm looks at each horizontal line one by one.

In the case of the horizontal lines image:

Line (1): A big long red line. Line (2): Another big long red line. Line (3): Again, another big long red line. Line (4): A big long yellow line. Line (5): Another big long yellow line. Line (6): Again, another big long yellow line. Line (7): A big long blue line. Line (8): Another big long blue line…and so on.

In the case of the vertical lines image:

Line (1): There’s a few red pixels, a few yellow pixels, a few blue pixels, a few purple pixels, a few green pixels, a few cyan pixels, a few more green pixels… and so on…Line (2): There’s a few red pixels, a few yellow pixels, a few blue pixels, a few purple pixels, a few green pixels, a few cyan pixels, a few more green pixels…and so on…Line (3): There’s a few red pixels, a few yellow pixels, a few blue pixels, a few purple pixels, a few green pixels, a few cyan pixels, a few more green pixels…and so on…and so on.

We can see that in the vertical lines example, we need a lot more information for each line, making the file size bigger. We can use this information to reduce the file size of the image below.


The image on the left is the original GIF and it is 21.7K. The image on the right is the same GIF after we have manually reduced its size. This is now 13.8K.

Before starting this sort of thing, reduce the number of colors to an acceptable level (without making the image distorted), and turn off any anti-aliasing on your software.

Reducing a GIF’s file size by hand can take a bit of time and patience. The main difference between the two images is the backgrounds. On the second image we have replaced the shaded background with six plain stripes with no dithering. This will reduce the file size by a large amount.

The second thing we have done is removed any extraneous pixels. If you look at a close-up of the monitor image below, you’ll see that the shadow is made up of two similar looking gray colors. Removing one of the grays by simply drawing over it with the other gray color will help keep the file size down.


If this is all a bit too time consuming and boring, there are several shareware and commercial programs that can optimize GIFs for you. Check out Photo GIF by BoxTop Software.

If you want to find out more about GIFs, why not go back in time and read Jamal Ghandour’s excellent Art Department columns in ATPM 4.03 and 4.04. These cover Web Palettes and Transparency.

Next month I’ll be showing you how to create an animated GIF. Please send any comments or questions on this or about anything to do with Web Graphics to

appleCopyright © 2000 Grant Osborne,

Also in This Series

Reader Comments (29)

Kamlesh Sharma · January 10, 2001 - 01:01 EST #1
I appreciate the information here on this page.
Michael Tsai (ATPM Staff) · April 19, 2001 - 19:30 EST #2
Jorge: Please see Grant's September column on Animated GIFs.
Parag Patil · May 22, 2001 - 07:00 EST #3
Dear Sir, I have extracted a GIF file in my C program (by opening the GIF file in binary format, I read the file and saved it in text format.) Now I have a text file which represents a GIF image. I want to make a proper picture file from that text file. (It means I will open that text file and I will read it in binary format, using those contains I want to make a proper picture file.) Will you please help me regarding this matter? Is any code available for doing this? Please send the reply at Thanks in advance. Parag
prashant · June 18, 2001 - 06:35 EST #4
Hi, I want to make a banner. For that I am fetching the information from user like text of the banner color (bgcolor,foreground color), font, font face, etc. Then I have to take all the information and make the banner. I can make it with the use of the HTML and JSP but the final banner created is in the form of JSP file. I want it to be in the form of GIF can you help me out in such requirment. Waiting for your early reply. Thanks.
Kurrus · August 10, 2001 - 09:26 EST #5
Awesome Site! Thanks for sharing this great info with us. Best wishes to you and yours. Kurrus
Senthil Kumar.S.H. · August 21, 2001 - 07:38 EST #6
I am an engineering student. Please help me to construct a GIF file using Powerpoint. For simple animation, could I combine sevaral pictures in a single GIF file?
Evan Trent (ATPM Staff) · August 21, 2001 - 19:46 EST #7
Hi, The latest version of PowerPoint should handle animated GIFs properly. Older versions will show only the first frame of the GIF file. The easiest way to construct an animated GIF, in my opinion, is to get a copy of GIFBuilder for the Mac and then paste or import each frame, one by one. GIFBuilder lets you configure every aspect of the animation and even has some great filters for fading in and out, or between frames. It's very easy to use and gives you good results. Best, --Ev
Pavan Kumar · November 30, 2001 - 09:29 EST #8
Hello. I have opened the JPEG file in binary format in C, but could not convert it into an image in the output. I could not find the parameters such as height and width of the image. I request you to kindly help me regarding this. Thank you, Pavan
Jenn · January 16, 2002 - 02:20 EST #9
Hi. I'm totally new at this. I was just wondering if there is anyway I can put an animated GIF in an e-mail? Jenn
Nirlep · January 24, 2002 - 06:08 EST #10
Hello. I'm looking for in-depth file format informatin about GIF, JPEG, MP3, MIDI, WAV, as well as multimedia standards and compression technology. If you have any information/content about these, kindly e-mail me. Nirlep
Rob Gibson · December 11, 2002 - 16:56 EST #11
How does one pronounce the word "GIF?" Is it with a hard "G" as in "graphics" or is it soft like "giraffe?" A pint of beer is riding on the answer. Cheers.
Lee Bennett (ATPM Staff) · December 11, 2002 - 19:35 EST #12
I believe there will never be a concensus on the pronunciation of GIF because too many people have adopted each way of saying it.

Having said that, as far as I'm concerned, it should be with a hard "G." After all, it does stand for "Graphics Interchange Format."

Last I knew, CompuServe owned the format. The correct answer to your question is probably however they pronounce it, officially.
Alvin P. Schmitt · February 5, 2003 - 05:36 EST #13
I have my own "home grown" word processor. It presently does not support .jpg, .gif, or bitmapped graphics. I would like to include graphics. I need to know how to change a .jpg or .gif file to a bitmap and then how to display that bitmap. Any help would be greatly appreciated. Thank you.
anonymous · February 12, 2003 - 14:26 EST #14
The whole "web-safe color" thing is a relic of the days when Windows 9x defaulted to 640x480 8-bit color to retain compatibility with the low-end display hardware that most consumers were using at the time. Is this really an issue now? For that matter, was color dithering ever really killing the enjoyment of anyone's web site? Sure, I remember looking at JPEGs in 16-color mode in 1995 and not being able to tell what they were, but come on. How far are you going to bend to accommodate the lowest common denominator? How many people, in this day and age, visit an "unsafe colored" site with both Mac and Windows in whatever mode and are truly dismayed at the differences or come away with an entirely wrong impression of the site, all because of the quantization of a few pixels? IMHO, worrying about web-safe colors after 1996-97 was for people with way too much time on their hands.
Lee Bennett (ATPM Staff) · February 13, 2003 - 01:16 EST #15
You are entirely correct regarding essentially all hardware these days being of sufficient color depth to prevent poor rendering of non-web-safe colors.

By the way, allow me to point out that web-safe colors were never about JPEG images. The two aren't directly related. JPEGs have always displayed at the maximum color depth available...period. Web-safe colors apply to graphic formats with indexed color palettes such as GIF, as well as HTML-based color definitions, such as background colors.

Having said that, it should be noted that web-safe color values to still have some amount of value for some circumstances. Even with the better color depth of today's hardware, Macs and Windows still use different system color palettes. My understanding is that a color definition can shift on the different platforms. For example, supposed you create a JPG image that has a photo-realistic object on top of a solid color background that, say, you filled in from Photoshop. If that background isn't a web-safe color, and you place that JPG on top of an HTML-created color background that uses the same RGB value as what you used for the JPG's background, the platform you created it on would show it seamless, but a faint color shift might be detectable on the other platform. If that background color was web safe, the transition from the edge of the JPG to the background HTML color should be seamless on both platforms.

You're absolutely right—hardly anyone has issues with web site colors due to its use of unsafe colors. But there is still a valid reason, albeit a small one, to continue using them in certain circumstances.
Joie · March 31, 2003 - 03:24 EST #16
How can we create an animated GIF file? Do you have the software?

Lee Bennett (ATPM Staff) · March 31, 2003 - 09:01 EST #17
Joie - a comment was already posted to this page that points to our article about animated GIF files. It explains the nature of them and recommends some tools to make them.

In addition to those recommended applications, GraphicConverter is another good choice.
Lonnie Harger · April 29, 2003 - 16:07 EST #18
We're having an office debate about the pronunciation of .GIF. Which is it? GIF like "Gifford" with a hard "G" sound or JIF like the the peanut butter, with a soft "G"?

Lee Bennett (ATPM Staff) · April 29, 2003 - 17:14 EST #19
Lonnie - try to skim through comments on ATPM pages before asking a question. Many times, you'll find someone else already asked and was answered. Scroll up about 6-7 comments from the one you posted and you'll find a comment I left in December that talks about the pronunciation.
Anthony Andrews · September 10, 2003 - 15:16 EST #20
Cheers! Very useful information, and the comedy elements stopped me from dozing off!
gabriel · January 14, 2004 - 20:16 EST #21
I need to create an animation of a card by combining 2 pictures in a single GIF file.the two pictures should change repeatly.How can i construct GIF file like that using Powerpoint? Then i have to send the card through mail of intranet.
Frank Lane · October 18, 2005 - 15:52 EST #22
anyone wants to work together on trying to unravel the GIF format, just email me. I have a some software that I have pieced together in VB that can read and write most of the information in the file, with the exception of the actual data stream; that one seems to escape me. The actual format up until the data stream is actually fairly straight forward.
Sarah Wilson · November 11, 2005 - 10:01 EST #23
Hi! How do you turn pdf images into gif images?
ATPM Staff · November 11, 2005 - 10:31 EST #24
Sarah - first you must understand that a PDF is not an image. It is a container of sorts that holds images, text, annotations, etc. and presents them in a universally readable format.

Having said that, if you're running OS X 10.4.x you can open the PDF in Preview, then select Save As from the File menu and change the format from PDF to any other supported format you desire.
Bob Gow · February 8, 2006 - 07:57 EST #25
With reference to the GIF Data Stream:
The data is defined as a stram comprising blocks of 8-bit bytes.
Why the, when I read the File of a small GIF image (GIF89a), do I find bytes that are obviously bigger than eight bits, eg. decimal 402, decimal 8249, and even decimal 65533?
What is the significance of these bytes and how does the decoder interpret them?
I'd love a bit of help!
Jeff Hickling · December 17, 2006 - 15:33 EST #26
Please could you tell me how to get rid of handgif 89a file which is being used by someone in the Newsgroups where I post, which in effect stops my answer posts from reaching their destination.

Although I can open the file I cannot delete it as the delete option remains closed off.

So I have to completely renew the post which is most tiresome.
Is there anything else I can do?

Jeff Hickling.
Casharina Collier · July 23, 2007 - 15:13 EST #27
For some reason I cannot get GIF banners to show up on my screen. They look like Grey boxes. When I go to download them I get a message that says: Not a valid GIF, please explain this to me and lmk if I can fix it. Thanks

BTW: Someone else created the GIF banner for me to download for my new website, I can't get it to work. Thanks!
ATPM Staff · July 23, 2007 - 15:18 EST #28
Casharina - if you can view other GIF banners but not the ones your contact created, then your contact didn't create a proper GIF file. If you provide a link to the GIF in question that I could look at, we might have some additional help to offer.
Shareef Douedari · February 22, 2008 - 11:49 EST #29
This subject is very interesting ,
thanks alot for this information .

Add A Comment

 E-mail me new comments on this article