Image Export Formats

[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!