Image Export Formats

[Midgardsormr]

In the early days of the Web, Compuserve's GIF format was everywhere. The GIF added three important things to imaging: compression, transparency, and animation.

Unlike the bitmap, GIF uses a compression scheme to reduce file sizes. GIF uses a lossless compression algorithm called Lempel-Ziv Welch (LZW), which looks for repeating horizontal patterns and stores each pattern only once. Every time the pattern is encountered in the image, it is replaced with a code that represents the longer pattern. In this way, GIFs compress by removing horizontal redundancy. GIF's compression is lossless, meaning that no information is discarded during the compression process, so the image will not lose quality if it is resaved.

GIF's second advantage over the bitmap is its ability to handle transparency. A GIF can have one color designated as transparent, allowing non-square images, and images with holes that let a background show through. However, since only one color can be made transparent, it is impossible to achieve anti-aliasing between a transparent graphic and the background it is placed on. Slanted lines or curves will show very obvious jagged edges.

The third thing GIF added was simple animation. A GIF can be built with several frames, and it will cycle through them endlessly to allow for very rudimentary motion graphics. Unfortunately, the LZW algorithm is not applied across the frames, so even though two frames may be similar, they are not compressed together. A ten-frame animation will be roughly 10 times larger than a single frame still.

All is not roses, though. GIF's maximum color depth is only 8 bits, so an image can have a maximum of 256 colors. Although that may seem like quite a lot, many colors are used to soften the jagged edges that appear on arcs and slanted lines. This anti-aliasing process can use far more colors than are allowed by the GIF format.

GIF is best used for images that have wide areas of solid color and simple geometric shapes. "Cartoony" images and text benefit the most from GIF compression. Text banners for web pages are often saved as GIFs because they allow a designer to use an unusual font, but they remain small enough to not add too much download time. Photographs and textured illustrations will receive almost no benefit from being saved as GIFs versus bitmaps. Also, the small color palette available with GIF means that a photograph will often lose quite a lot of color information, resulting in either ugly banding artifacts or very visible dithering.

[Midgardsormr]

One of the most common image formats seen today is the jpeg. As its name implies, jpeg was invented for the benefit of digital photography. Like GIF, a jpeg uses compression to reduce file sizes. Unlike GIF, that is all it does; it has no additional features like transparency or animation.

Jpeg compression is a complex topic, and one that I have to admit I have not completely understood. Fortunately, the fundamentals of the topic are sufficient to know when to use jpeg over other formats. Jpeg is a lossy format; it discards information in order to reduce the file size. Jpeg compression removes some of the intermediate colors in a gradient, resulting in color "banding." At high levels of compression, this banding can become very noticeable, but at lower compression ratios, 50% or higher, the color loss is much less obvious. The compression also tends to add noise to solid-color areas of an image.

Because jpeg is a lossy algorithm, it is inadviseable to use it for anything other than final exports of an image. Each time a jpeg is resaved, a little more information is lost.

Jpeg is best used for the final export of a photographic or highly textured image. It does not do well with flat-colored artwork or sharp lines. Compressing text with jpeg will almost always produce blurry edges and obvious visual artifacts.

[Midgardsormr]

The PNG format is a tremendous improvement over GIF. It generally compresses better, allows more colors, and it allows much more flexibility in transparency. It does not support animation, though.

PNG's compression algorithm is called Deflate. It is an improved version of LZW, and is the same algorithm used for zip archives. Where GIF compression looks at horizontal patterns, PNG is capable of also looking at vertical patterns, so it can compress an image even further than GIF.

A GIF image allows only 256 colors, but PNG supports up to 48 bits of color (16 bits per channel) and 16 more bits of transparency information. That's over 280 billion colors--far more than you're ever likely to need. It also allows for an alpha channel, which is a grayscale overlay that determines the level of transparency the image has. The alpha channel allows parts of the image to be translucent, and the edges to fade away. It also makes it possible to anti-alias the edges of a non-square image, eliminating the jagged edges.

The two most common varieties of PNG are PNG-8, which is an 8-bit palleted image very similar to a GIF, and PNG-24, which is a little bit of a misnomer, as it is 8 bits per channel. 24 bits for color, and 8 more for alpha, which means it is often actually a 32-bit image. Adobe (formerly Macromedia) Fireworks uses PNG as its native format, and a Fireworks PNG has a few extra features beyond the scope of this article. Some applications can open a Fireworks PNG, but those extra features will usually not be present.

Like GIF, png is best used for illustrative images with flat colors and sharp lines. It can also be used for textured or photographic images when transparency is needed, although it does not compress as well. Because it is a lossless format, it is possible to use it for working images without fear that they will lose quality after multiple saves.

[Badger]

You can delete this post later if it gets in the way... but here's some rep for such a good post on image formats, you go mid! ..

[Midgardsormr]

Thanks. It's pretty much finished now. If anyone notices any inaccuracies, please let me know. It's been quite some time since I learned this stuff, and I may have gotten some of it wrong. I haven't yet figured out how to approach the topic of vector images. If someone else gets inspired, go ahead and have a stab at it!

[pyrandon]

OK, Bryan: this was amazingly helpful. In about four posts you explained concepts I've never understood (as a techno idiot, myself!) What a great idea and a great execution. Nicely done!