GIF
GIF at a Glance
- Stands for
- Graphics Interchange Format
- Pronounced
- Jiff (like the peanut butter)
- File extension
-
.gif - Inventors
- Bob Berry and team at Compuserve
- Created
- 1987, updated in 1989
- Standards
- File spec free and open release by Compuserve
- Colors
- 256
- Transparency
- One color may optionally be 100% transparent
- Optional Goodies
-
- Interlaced GIFs
- Mostly a leftover from the days of slow connections. Your guests will see a low-resolution version of the picture first, and then details will fill in as it loads. We mostly don't use GIFs that are so big that this comes into play.
- Animated GIFs
- Don't. Just don't. The only legitimate use we know of for an animated GIF is as a movie where each frame has to be perfect. Oh, all right, you can use one on your site. If it's clever. Or if it's an animated GIF of a train. We like trains.
- Compression
- Lossless - LZW (Abraham Lempel, Jacob Ziv, Terry Welch)
- How it works
- Uses a palette, and instead of putting 24-bit values in its map for the image, it puts palette values. So it starts off with 3:1 compression. The LZW compression on top of that can raise it to 5:1 or even 10:1.
- Links
-
- Wikipedia article on GIF
- Article on Kuro5hin about the GIF patent story with links to other coverage of the story
GIF Is Good For
Line drawings and clip art
Our example of clip art is Tux, the Linux penguin. The image is taken from Nicu's Clipart in the Open Clip Art Library. Clip art images typically have only a few colors. In fact, a lot of clip art images are just solid black on white.
A close-up of a section of the Tux image shows some of the additional colors that most graphics programs will automatically put on the borders between colors in order to reduce the stairstep effect (aka "the jaggies") on curved and diagonal lines.
A blow-up of the palette for our Tux clip art image shows that the image has 80 distinct colors, which seems like a lot. After all, we can only count four colors in the picture: black, white, orange, and grey. Decent graphics programs will try to make your images look nice and smooth by adding in some in-between colors. Or rather, they will if you give them a chance.
The largest palette a GIF image can have is 256 colors. When you have a transparent color, like we did with our picture of Tux, that knocks it down to 255. If you start putting a lot of colors into your image, pretty soon your graphics program is going to run out of palette space. The first thing you'll notics will not be colors that look wrong. The first thing you'll notice is that some of the diagonals and curves will start looking jaggedy. Keep an eye out for that.
CAD drawings
Text
This is some plain black text, using one of our favorite fonts, "Girls Are Weird" by John Martz, available at Robot Johnny's Free Fonts.
Notice that the diagonals on the "K" and the "&" are very smooth. Once again, graphics programs will do their best to smooth things out for you.
Normally you'll create an image of text using your graphics program's text tool. We have a little advice from experience:
- Make your text as close as you can to the size it's going to appear on your web page. Changing the point size in your text tool will often give you smoother characters than changing the size of the image later on. When you set the character down, your graphics program will perform a smoothing step. If you resize it later on, it may not recognize that what you originally had was a black diagonal line. All it'll see is the values of the pixels, and sometimes the result of smoothing followed by resizing won't be as smooth as getting the size right the first time. Some graphics programs support vector text objects, which lets you get pretty much the same result.
- Almost every graphics program's text tool will let you choose in-between values for font size. For example, if the drop-down menu shows 48 points and 60 points, you can type in 51 points or 63 points.
- If your graphics program supports layers and you're putting text on top of an image, you should make every word a separate layer. Slide the words around till you're happy, and you're done.
- You don't need to install all the fonts you use. Open up a font you've downloaded from Windows Explorer or in a font browsing tool, and it'll magically appear on the list of fonts in your graphics program's text tool.
Most scans
(except scans of photographs)
Animations
(if you absolutely have to). No equivalent in PNG or JPEG.
Images with transparent areas.
No transparency in JPEG.
GIF Is Bad For
Photographs
Here's a picture of Helen (sorry, we don't know her last name) from the U.S. Fish and Wildlife Service Photo Archive. And no, we don't think Helen (whoever she might be) is either a fish or dedicated to the wild life.
One image is a GIF file, the way it came from the site. Evidently somebody over there hadn't read this page or they'd have known that GIFs are bad for photographs. But really, it doesn't look all that bad. The face looks a little flat, but that could be the lighting or the makeup.
The other image is the same file converted to a JPEG. Take a close look and see if you can tell the difference. Our intention was to make the images look exactly the same.
OK, now you can do whatever your browser supports (hovering your mouse pointer over the image usually works) to see which one is the GIF and which one is the JPEG. Did we succeed? Good. Then we seem to have proved that GIFs are fine for photographs!
Well, not really. The GIF image is 53,631 bytes and the JPEG is 20,166 bytes, some 2 and a half times smaller. That means for every picture of Helen the Fish and Wildlife Service archive can serve in a given time, we can serve 2 and a half pictures. If we were in competition (and make no mistake, your web page is in competition, even if it's only against your visitors' patience), we'd win hands down.
We have another picture on our JPEG page that illustrates what usually happens: the image doesn't look as good when you save it as a GIF. But even when you're lucky and get a perfect subject for a GIF like Helen was, your GIF file is still going to be too big.
Images with more than 256 colors
Always look for banding
GIF in the News
Some years after the GIF format had become widespread, Unisys announced that they owned a patent that covered some of the compression technology used to make GIFs. That was one of the factors that led to the development of the PNG file format. Later on, when Unisys started enforcing their patent by requiring a fee from people who made graphics programs that created gifs, there was a boycott of GIFs on the Web. The patent expired in the US in June 2003, but it's still active in some countries. Most web sites that changed over to PNG are keeping the PNGs because PNGs are a superior (smaller) format, and other sites continue to convert to PNGs and publish new images as PNGs.