Compression Methods: GIF vs. JPEG vs. PNG
excerpted from WebReference.com   

Compression algorithms re-encode image data into more compact representations of the same information.  Think of compression as using fewer words to say the same thing. 

Compression Methods

There are basically two types of compression methods: lossy and lossless.  Lossy compression creates smaller files by discarding (losing) some information about the original image.  It removes details and color changes it deems too small for the human eye to differentiate.  Lossless compression, on the other hand, never discards any information about the original file.

Graphic File Formats

The graphic file formats most browsers support are GIF, JPEG and, more recently, Progressive JPEG (p-JPEG). New formats are appearing as possible challengers, including PNG and those based on wavelet compression.  Let's take a look at each of these in more detail.

GIF

The Graphics Interchange Format (GIF, pronounced jiff, though most people say giff) is the oldest graphic file format on the Web, and all browsers except Lynx support it.  GIFs are 8-bit images, which limits them to a maximum of only 256 colors.  

GIFs use a lossless compression algorithm and support transparency, animation (display of multiple images within a single GIF file) as well as interlacing.  

When you save an image as an interlaced GIF (by checking the Interlaced option box in Photoshop) and display it inside a web page, visitors to your site will see a low-resolution image quickly, which gradually comes into focus.  Non-interlaced GIFs, on the other hand, appear as an empty box with a red "X" until the image downloads fully to your web visitor's computer.  The only drawback to interlacing is that it usually increases the file size slightly.  

The LZW compression algorithm used in the GIF format is owned by Unisys, and companies that make products that exploit the algorithm (including the GIF format) need to license its use from Unisys. As for users of GIF images, however, Unisys does not require a license, although their licensing statement indicates that it is a requirement. Unisys says that getting a license from them does not necessarily involve a fee.

Although the LZW compression algorithm used by GIFs is one of the better general purpose compression algorithms, it wasn't designed specifically for graphics.  As a result, it doesn't work well with bilevel (black and white) or true color images.

GIFs are best suited to flat-color sharp-edged art or text.  GIFs retain edge and sharpness information if there is no dithering.  Humans are especially sensitive to edge sharpness, so GIFs generally appear sharper than JPEGs. 

JPEG

JPEG (pronounced jay-peg), is designed for compressing either full-color or gray-scale images of natural, real-world scenes. JPEG is a lossy compression algorithm.  When you create a JPEG or convert an image from another format to a JPEG, you are asked to specify the quality of image you want.  Since the highest quality results in the largest file, you can make a trade-off between image quality and file size.  The lower the quality, the greater the compression, and the greater the degree of information loss. 

JPEGs are best suited for continuous tone images like photographs or natural artwork; not so well on sharp-edged or flat-color art like lettering, simple cartoons, or line drawings. JPEGs support 24-bits of color depth or 16.7 million colors. 

JPEG is actually just a compression algorithm, not a file format.  JPEG is designed to exploit certain properties of our eyes, namely, that we are more sensitive to slow changes of brightness and color than we are to rapid changes over a short distance. 

While JPEGs are usually the best choice for photographs, on 8-bit monitors they are force-dithered into an 8-bit palette. JPEG compression is treated as 24 bit data (8 bit for gray), regardless of the colors in the original image. Therefore, if you reduce an image from 24-bit to 8-bit prior to JPEG compression, the compression ratio will actually worsen as will the overall quality. 

JPEG compression introduces noise into solid-color areas, which can distort and even blur flat-color graphics. This is why JPEGs are not well suited to flat-color sharp-edged art or type.  A JPEG can reduce a 900K 24-bit image to 45K (high quality) or 30K (medium quality), a factor of 20:1 to 30:1. With JPEGs, however, the more you compress, the more edge definition and sharpness you lose.  JPEGs do not support transparency, either.

It is important to note that saving a graphic to JPEG format with compression should be a last step. Compression effects are cumulative. This means that every time you re-save a JPEG file, you are compressing it further, and thereby tossing away data (photographic detail) that you can't get back.

Progressive JPEGs (p-JPEGs) are typically slightly smaller than baseline JPEGs, but their main advantage is that they appear in stages, giving the effect of the image fading in, similar to interlaced GIFs, as opposed to painting from the top down.

All Web browsers support GIFs, most support JPEGs, and a rapidly growing number support progressive JPEGs. All three formats are supported by the latest versions of Netscape and Internet Explorer.

PNG

The Portable Network Graphic (PNG), pronounced ping, format was designed to be a better, legally patent-free replacement for GIF.  PNG is a lossless compression format for transmitting a single bitmap image over computer networks.  PNG matches all of GIF's features except animation.  PNG has better compression and interlacing than GIF and adds new features of its own, such as gamma storage, full alpha channel, true color support, and error detection.  PNG supports two methods of transparency, one-color masking and the other alpha channel.  PNG's full alpha channel makes it possible to create beautiful glows and drop shadows which layer over different-colored backgrounds perfectly.

Gamma is a measure display device brightness.  The problem facing web designers is that gamma values for different platforms and different monitors vary.  Macs have a gamma of about 1.8, and PCs a gamma of 2.2.  Since there is no "gamma standard" on the Web, graphics that look great on a Macintosh may look dark on a PC. GIFs and JPEGs have no built-in gamma storage, so averaging these two gammas (setting gamma to 2.0) in Photoshop is one way of dealing with the problem.  PNG avoids the problem by allowing designers to store the gamma of the creation device. When displayed, PNGs automatically adjust to the host monitor's gamma.

Not all browsers can display PNG's multilevel transparency.  Support for PNG by older Web browsers is mainly through plug-ins.

Because PNG uses the same LZW compression method used in the popular pkzip file archiving utility, you can't zip PNG files because they are, in effect, already zipped. 

Future Formats

JPEG 2000

The new JPEG 2000 spec includes wavelet, tiling, progressive, regions of interest... and the kitchen sink. It is aimed primarily at large imagery.

By offering functionalities such as multi-resolution representation, superior compression efficiency at low bit rates, lossy to lossless progression, and embedded bit stream architecture, the wavelet transform has been recognized as a preferred tool for image and video compression and has been selected as the fundamental building block of the emerging JPEG-2000 standard.

Wireless Bitmap
A Wireless Bitmap (WBMP) is a graphic image format for use when sending Web content to handheld wireless devices. The format is defined as part of the Wireless Application Protocol (WAP), Wireless Application Environment (WAE) Specification. If you are creating Web content that is directed to handheld phones or personal digital assistants (PDA) that have Web access, you use the Wireless Markup Language (WML) to encode the page and its text. An image can be included in the form of a WBMP file -- initially, supported only in black-and-white -- that you can convert from a Graphics Interchange Format (GUI), Tag Image File Format (TIFF), or other graphic formats.