Image Optimization Part 2: Selecting the Right File Format » Yahoo! User Interface Blog

A List Apart: Articles: Cross-Browser Variable Opacity with PNG: A Real Solution

Whereas PNG supports alpha transparency, GIF only supports binary transparency

Image Optimization Part 2: Selecting the Right File Format » Yahoo! User Interface Blog - 這篇講得很詳細。

GIF
* GIF is a palette (also called “indexed”) type of image. It contains a palette of indexed colors, up to 256, and for every pixel of the image there is a corresponding color index.
* GIF is a non-lossy format, which means that when you modify the image and save it, you don’t lose quality.
* GIF also supports transparency, which is a sort of boolean type of transparency. A pixel in a GIF image is either fully transparent or it's fully opaque.

JPEG
* JPEG doesn’t have the 256 colors restriction associated with GIFs; it can contain millions of colors and it has great compression.
* It's a lossy format, meaning you lose quality with every edit, so it’s best to store the intermediate results in a different format if you plan to have many edits.
* There are, however, some operations that can be performed losslessly, such as cropping a part of the image, rotating it or modifying meta information, such as comments stored in the image file.
* JPEG doesn't support transparency.

PNG
* PNGs is a non-lossy format that comes in several kinds, but for practical purposes, we can think of PNGs as being of two kinds: 1. PNG8, and 2. truecolor PNGs.
* PNG8 is a palette image format, just like GIF, and 8 stands for 8 bits, or 28, or 256, the number of palette entries. The terms "PNG8", "palette PNG" and "indexed PNG" are used interchangeably.
* How does PNG8 compare to GIF? Pros: (1) it usually yields a smaller file size. (2) it supports alpha (variable) transparency. Cons: (1) no animation support
* The second type of PNGs, truecolor PNGs, can have millions of colors, like JPEG. You can also sometimes come across the names PNG24 or PNG32.
* And how does truecolor PNG compare to JPEG? On the pros side, it's non-lossy and supports alpha transparency, but on the cons side, the file size is bigger.
* This makes truecolor PNG an ideal format as an intermediate between several edits of a JPEG and also in cases where every pixel matters and the file size doesn't matter much, such as taking screeenshots for a help manual or some printed material.

Internet Explorer and PNG transparency
* With PNG8, whenever you have semi-transparent pixels they appear as fully transparent in IE (version 6 and lower). This is not ideal but it’s still useful and is the same behavior that you get from a GIF.
* Below is an example that illustrates this, note how in IE6 the semi-transparent light around the bulb is missing

* For truecolor PNGs, the situation is a much less attractive compromise. All the semi transparent pixels appear grey in IE prior to version 7
* IE7 introduces proper native support for alpha transparency in both PNG8 and truecolor PNGs. For earlier IE versions you need to fix the truecolor PNG transparency issue using CSS and an AlphaImageLoader filter
* Although PNG8 should be the preferred of the PNGs, because it’s smaller in filesize and degrades well in early IEs without special CSS filters, there are still some use cases for truecolor PNGs:
(1) When the 256 colors of the PNG8 are not enough, you may need a truecolor PNG: in the other hand, if the colors are around a thousand or so, you may try to convert this image to a PNG8 and see if it looks acceptable. Very often, the human eye is not sensitive enough to tell the difference between 200 and 1000 colors. That depends on the image, of course; often you can safely remove 1000 colors, but sometimes removing even 2 colors results in an unacceptable image.
(2) When most of the image is semi-transparent: If only a small part of the image is semi-transparent, like around rounded corners, the GIF-like degradation of PNG8 is often OK. But if most of the image is translucent (think a PLAY button over a video thumbnail), you might not have a choice but to use the AlphaImageLoader hack.

Conclusion
* JPEG is the format for photos.
* GIF is the format for animations.
* PNG8 is the format for everything else — icons, buttons, backgrounds, graphs…you name it.