Raster Images: the Bitmap
Among the oldest image formats currently supported is Microsoft's Bitmap (bmp). The bitmap is very simple: it is simply the basic grid of colored dots with no compression. Because bitmaps are not compressed, they can get very large very quickly. For instance, an image with a resolution of 800 X 600 has 480,000 pixels. If it has 8 bits per pixel (256 colors possible), the file will be 480KB. That's one byte for every pixel. Suppose you want a 24-bit image, though? Your image shoots up to 1.44 MB. 800 X 600 is pretty small. If you're wanting a good-sized battle mat, say 24" X 36" at 200 dpi (dots per inch), you're talking about a resolution of 4800 X 7200. That's over 34 million pixels, and at 24 bits per pixel, you've got an image that requires more than 103 MB of memory just to load, to say nothing of emailing it to a friend for critiques.
The advantage to using the bitmap format is that it requires very little processing to manipulate an image. The computer is not forced to decode a compression scheme, so changes are very quick. That can be an advantage when dealing with complicated computations, although the processor speeds of most modern computers make the time savings minute.
Bitmaps are best used for small objects that are being prepared for extensive processing. The format does not support transparency, though, so its use is limited. Also, many internet browsers cannot natively display a bitmap. All in all, the bitmap format is largely obsolete, although it is still the default file format for MS Paint for some reason.
Raster Images: Graphic Interchange Format (GIF)
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.
Raster Images: Joint Photographic Experts Group (jpeg)
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.
Raster Images: Portable Network Graphic (PNG)
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.