JPEG, GIF, PNG, TIFF, BMP... what's the difference?
If you've ever created or edited an image file - especially for use on the web, you've probably had to choose a specific image format for your image. Given the proliferation of image formats on the web, it's important to understand their unique strengths and weaknesses so that you select the optimal format.
I'll also include examples starting with a 3024 x 1998 pixel RAW image I captured with my camera and a 2101 x 1576 pixel PICT clip art image.


RAW (5 MB) PICT (612 KB)
JPEG (Joint Photographic Experts Group)
The predominant image format online and offline, most images on the web appear as JPEGs and most photographs captured by digital cameras are saved in this format.
Compression? Lossy (degree of compression is adjustable).
• Tiny file sizes for photos.
• Small file sizes for graphic art, text, and icons.
• Excellent results on photographs with smooth color variations.
• Fair results on images with sharp transitions, particularly line art, text, and icons.
• Each edit-and-resave cycle results in generational loss of quality.
Pros:
1. Excellent color range (up to 16.7 million simultaneous colors for any image).
2. Generally excellent "bang-for-the-buck" with regards to image quality and file sizes for photographs.
Cons:
1. Compression algorithm occasionally results in suboptimal visual results when used on graphics art and text.
2. No support for transparency.
3. No support for animation.


JPEG (1.1 MB) vs. RAW (5 MB) JPEG (440 KB) vs. PICT (612 KB)
GIF (Graphics Interchange File)
The most popular image format encountered on the web during the 1990's, GIF use has declined in recent years - although its online prevalence is still second only to JPEG. The decline in the use of GIF can be attributed to two factors: Netscape's introduction of in-line JPEG support in 1995 and Compuserve's decision to demand royalties from creators of any software application that displayed or generated GIF's in the late 1990's. Although Compuserve's action had no direct effect on web developers and web surfers, it did lead to creation of the royalty-free PNG format which has gradually supplanted GIF. (Incidentally, most of the GIF patents have since expired; the last will expire on August 11, 2006.)
Compression? Lossless.
• Tiny file sizes for graphic arts, text, and icons.
• Small file sizes for photos.
• Excellent results on images with sharp transitions, particularly line art, text, and icons.
• Excellent results on photographs with smooth color variations.
• No generational quality loss with each edit-and-resave cycle.
Pros:
1. Excellent "bang-for-the-buck" for icons and graphics.
2. Transparency support (by declaring single pixel value as transparent).
3. Animation support.
Cons:
1. Limit of only 256 simultaneous colors for any image (from a palette of 16.7 million).
2. Color limit often results in dithering when some colors need to be rendered.
3. Large file sizes when used on photographs.
4. Transparency support limited - no alpha channel.


GIF (2.7 MB) vs. RAW (5 MB) GIF (184 KB) vs. PICT (612 KB)
PNG (Portable Network Graphics)
The PNG (pronounced "ping") format was developed in response to Compuserve's decision to demand royalties with the GIF format. PNG can be viewed as an "advanced GIF" format that is royalty-free.
Compression? Lossless.
• File sizes comparable to GIF, as long as 256 colors. If color depth is 16.7 million, the file sizes will be substantially larger.
• Excellent results on images with sharp transitions, particularly line art, text, and icons.
• Excellent results on photographs with smooth color variations.
• No generational quality loss with each edit-and-resave cycle.
Pros:
1. Excellent "bang-for-the-buck" for icons and graphics.
2. Transparency support (can declare single pixel value as transparent or add an alpha channel).
3. Excellent color range (greater than JPEG's 16.7 million simultaneous colors).
Cons:
1. No animation support.
2. Although supported by all new browsers, support by older browsers is a bit more spotty. For example, Internet Explorer 6 does not support alpha channel transparency in PNG by default. (Internet Explorer 7 does).


PNG 8-bit (3.2 MB) vs. RAW (5 MB) PNG (192 KB) vs. PICT (612 KB)
TIFF (Tagged Image File Format)
TIFF is a professional image format that has traditionally been used for image editing, scanning, and publication, though it is increasingly encountered online as a result of its offline prevalence.
Compression? None/Lossless (you can choose).
• File sizes are generally huge.
• Excellent results on images with sharp transitions, particularly line art, text, and icons.
• Excellent results on photographs with smooth color variations.
• Generally no quality loss with each edit-and-resave cycle.
Pros:
1. Excellent color range (equivalent to JPEG's 16.7 million simultaneous colors).
2. Choice of no compression or lossless compression available to user.
3. Many additionally features available for the professional users - generally for offline applications.
Cons:
1. Complicated format (for example, compression algorithms for Macs vs. PC's differ).
2. Huge file sizes.
3. Online support in web browsers still limited.


TIFF (17.4 MB) vs. RAW (5 MB) TIFF (12.7 MB) vs. PICT (612 KB)
BMP (Windows Bitmap)
Windows Bitmap is an image format created by Microsoft, free of patents, which was created for use in the Windows operating system. Due to ubiquity of Windows, BMP support has diffused into many web browsers.
Compression? None.
• File sizes are humungous, even larger than TIFF.
• Excellent results on images with sharp transitions, particularly line art, text, and icons.
• Excellent results on photographs with smooth color variations.
• No quality loss with each edit-and-resave cycle.
Pros:
1. No patent restrictions, despite association with Microsoft.
2. Excellent color range (16.7 million simultaneous colors for any image).
Cons:
1. Although format itself supports transparency, no web browser supports BMP transparency at present, including IE 7. Transparency is implemented via an alpha channel that is stored as a file separate from the image file. A recently introduced, new version of BMP finally integrates the alpha channel into the existing image file, however.
2. Absence of compression, results in large file sizes, limiting online use to small icons and graphics.


BMP (23.1 MB) vs. RAW (5 MB) BMP (12.7 MB) vs. PICT (612 KB)
XBM (X Windows Bitmap)
XBM is a 1-bit, black-and-white image format analogous to BMP, but created for use in the Unix X-Windows GUI for cursors and icons. During the creation of the web in the early 1990's, XBM and GIF were the only image formats supported by early browsers. XBM support continues to be offered by most browsers, probably primarily for historical interest and legacy support.
Compression? None.
• Great results on images black-and-white bit art only.
• No quality loss with each edit-and-resave cycle.
Pros:
1. Image data is not stored as binary information like every other image format in existence (GIF, JPEG, PNG, TIFF...) but rather in the form of C language source. As a result, the raw code for any image can be simply copied and pasted into the code for any application and compiled!
Cons:
1. Black and white only.
2. Support for XBM to be removed from Internet Explorer 7.
The MacPlumber's Bottom Line
Photographs: JPEG; experiment to see how much compression you can get away with on a case-by-case basis.
Icons, Graphics, Text: PNG if transparency not needed; GIF if transparency required.
Tuesday, July 11, 2006
The ApplePlumber’s Journal