本文譯自YUI官方博客
本文主要介紹圖片的格式以及如何在開(kāi)發(fā)工作中選擇正確的圖像格式。我們先簡(jiǎn)短地介紹比較流行的gif和jpeg格式，然后再著重介紹png，希望能糾正對(duì)于png格式的一些錯(cuò)誤認(rèn)識(shí)。
GIF
GIF是圖像的一種調(diào)色板類型（或者叫做顏色索引）。它包含多達(dá)256個(gè)索引顏色的調(diào)色板，圖像的每個(gè)像素都有相應(yīng)的顏色索引。這種格式不再存在專利的問(wèn)題，因此你可以隨意生成gif圖像而不用擔(dān)心因?qū)＠麊?wèn)題入獄。
GIF是一種無(wú)損格式，這意味著你可以對(duì)圖像進(jìn)行修改然后保存也不用擔(dān)心損壞圖像質(zhì)量。
GIF同樣支持動(dòng)畫，在Web1.0的黑暗年代，gif圖像的濫用導(dǎo)致了很多問(wèn)題，比如會(huì)在郵件上看到大量一閃一閃的圖片，旋轉(zhuǎn)的「@」標(biāo)志，墜落的小鳥(niǎo)之類。在更文明的WEB2.0年代，我們?cè)诘却乱粋€(gè)ajax請(qǐng)求的結(jié)果來(lái)更新頁(yè)面的時(shí)候會(huì)用gif來(lái)實(shí)現(xiàn)"loding..."的動(dòng)畫。然而，人們?cè)谧约旱纳缃痪W(wǎng)絡(luò)信息上還是會(huì)用gif做一些一閃一閃的頭像。不過(guò)，只要你需要，gif就會(huì)一直支持動(dòng)畫。
GIF同樣支持透明，不過(guò)是一種布爾類型的透明。GIF圖像里面的像素要不完全透明，要不完全不透明。
JPEG
JPEG沒(méi)有GIF256色的限制。它可以包括數(shù)百萬(wàn)種顏色而且可以很好地被壓縮。這樣的特性使JPEG很適合用于照片的存儲(chǔ)，事實(shí)上，大多數(shù)照相機(jī)使用JPEG格式來(lái)存儲(chǔ)照片。JPEG是一種有損格式，意味著你每次對(duì)圖像進(jìn)行編輯保存都會(huì)損壞圖像質(zhì)量，因此如果你打算對(duì)圖像進(jìn)行很多次編輯，最好的辦法是在處理過(guò)程中轉(zhuǎn)為其他格式。但是你對(duì)JPEG圖像進(jìn)行剪裁、旋轉(zhuǎn)圖像或者編輯圖像的meta信息（比如說(shuō)修改存儲(chǔ)在圖像文件中的注釋）時(shí)不會(huì)損壞圖像質(zhì)量。
JPEG不支持透明。
PNG
PNG是一種無(wú)損的格式，它可以分為好幾類。但是實(shí)踐中，我們可以將PNG分為2種：
- PNG8
- 真彩色的PNG
PNG8是調(diào)色板圖像格式，就像GIF一樣。PNG8中的8表示8位，或28，或256，調(diào)色板項(xiàng)目的數(shù)目。術(shù)語(yǔ)PNG8，調(diào)色板PNG和索引PNG可互換使用。
PNG8和GIF的比較。
優(yōu)點(diǎn)：
PNG8的文件通常比GIF格式的小PNG8格式支持alpha通道的透明。缺點(diǎn)：
不支持動(dòng)畫
第二種PNG格式或者叫真彩色PNG，也可以像JPEG一樣有數(shù)百萬(wàn)種顏色。你可能遇到叫PNG24或者PNG32的圖像文件。
真彩色PNG和GIF比較又怎么樣呢？真彩色PNG的優(yōu)點(diǎn)是無(wú)損格式而且支持alpha通道透明，它缺點(diǎn)是同樣圖像的情況下會(huì)比GIF格式文件大。這樣使得真彩色PNG很適合用于多次編輯JPEG圖像和如果每個(gè)像素或者每個(gè)文件大小無(wú)關(guān)重要的情況，比如截屏或者某些打印的材料。
IE瀏覽器和PNG透明
我們剛剛說(shuō)2種PNG類型的圖像都支持alpha通道的透明，但是你應(yīng)該了解有些瀏覽器的怪癖會(huì)影響這兩種PNG類型圖像的透明效果。
在IE6或更低版本的IE瀏覽器中，如果你使用PNG8,當(dāng)你的圖像文件中有半透明的像素，瀏覽器會(huì)顯示為完全透明。如果你想避免這種情況，你可以用GIF來(lái)代替。如果你在IE7或者更低版本的IE瀏覽器可以使用GIF圖像來(lái)代替，如果你使用高級(jí)一點(diǎn)的瀏覽器比如(Firefox, Safari, Opera)，你可以使用PNG8。下面是一個(gè)例子：IE6中的PNG8圖像文件有半透明的像素。
更詳細(xì)的內(nèi)容點(diǎn)擊這里
真彩色的PNG圖像文件在某些情況下會(huì)失去吸引力。所有半透明的像素會(huì)在比IE7更低版本的瀏覽器中變成灰色。
更多這方面問(wèn)題的討論請(qǐng)看這里
IE7為支持PNG8和真彩色的PNG 的Alpha透明度引人適當(dāng)?shù)脑С帧?duì)于早期的IE版本，你需要使用CSS和AlphaImageLoader濾鏡去修復(fù)真彩色PNG透明的問(wèn)題，我們將詳細(xì)討論在后續(xù)的文章討論這個(gè)問(wèn)題。 （警告：避免使用AlphaImageLoader。）
我們想說(shuō)的是：給PNG一個(gè)機(jī)會(huì)。
雖然PNG8應(yīng)該是首選的PNG圖像，因?yàn)橥瑯訄D像的情況下它比真彩色PNG更小，而且在早期的IE瀏覽器不需使用CSS濾鏡表現(xiàn)良好。但是還存在著一些真彩PNG格式的情況：
當(dāng)PNG8的256色不夠用的時(shí)候，你應(yīng)該使用真彩色PNG。以下是你應(yīng)該避免的情況：一方面，如果你會(huì)用到數(shù)百萬(wàn)計(jì)的顏色，JPEG會(huì)更適合你，并且JPEG會(huì)提供更好的壓縮。另一方面，如果顏色數(shù)量大概在一千左右，則可以嘗試這個(gè)圖像轉(zhuǎn)換為PNG8，看看它是否看起來(lái)可以接受的。很多時(shí)候，人的眼睛是看不出200種和1000種顏色之間的差異。當(dāng)然這取決于圖像；通常，有時(shí)你可以安全地刪除1000多種顏色，但有時(shí)你不可接受圖像刪除2種顏色的效果。在任何情況下，試試將真彩色PNG做為PNG8和JPEG的候選，這取決于你怎么在圖像質(zhì)量和文件大小方面的取舍。
當(dāng)圖像文件大部分是半透明時(shí)，你應(yīng)該使用真彩色PNG。如果圖像的僅一小部分是半透明的，比如圓角，你可以采用PNG8+GIF降級(jí)支持的方案往往是可行的。但是，如果大部分的圖像是半透明的（想想在視頻縮略圖的播放按鈕），你可能沒(méi)有選擇，只能使用AlphaImageLoader的hack方案。
最后總結(jié)一下：
- JPEG適合用于照片
- GIF適合用于動(dòng)畫
- PNG8適合用于所有東西，包括icon、按鈕圖像、背景圖像、圖表圖像等等
