昕竹軒網站設計-專注網站建設

很多網頁設計人員都搞不明白，那么多圖片格式，什么情況應該用什么格式圖片。我在這里就簡單分享下我的經驗。

原則：保證圖片不失真的前提下，以最小的圖片大小來導出圖片。

目前我們網絡上普遍使用的圖片格式分為JPG、GIF、PNG-8、PNG-32(PS中的PNG24)。

具體圖片格式的原理，我就不說了，大家可以去百度查詢下。

我只說明什么情況使用什么格式，以及它們的優缺點。

JPG：

一般來說，大型的、顏色豐富的圖片可以用JPG，例如照片、商品圖片。

缺點：JPG會損傷一些像素化的東西，例如文字，如果你的照片上有些像素字體，這些字會被擴散，周邊會出現雜點。

PNG-8：

目前使用圖片最多的格式之一，僅次于jpg，PNG-8是用來代替以前的GIF的，大部分情況PNG-8要比GIF小20%。

跟GIF一樣PNG-8是以像素點來存儲圖像的，所以比起JPG來說，它更加精確，不會產生像素字出現雜點的現象，一般用在按鈕、導航背景、圖標等地方。

PNG-8和GIF一樣，是支持圖片透明效果的。

缺點：大型、顏色豐富的圖片中，PNG-8的大小會越來越大，甚至達到PNG-32的大小。FW導出PNG-8的時候大跨度漸變會產生失真（這個如何處理后面會說）。

GIF：

目前GIF屬于淘汰階段，因為PNG-8比它更為優化，當然優點也顯而易見，那就是動畫。

PNG-32：

無損壓縮，32位真彩色圖片+alpha透明通道，幾乎完美的格式。

缺點：圖片大小很大，IE6下透明部分會產生灰底。

如何使用FW導出圖片

1.為什么使用Firewroks

fw有著比PS更好的圖片優化功能，

fireworks于photoshop的圖片優化比較。http://blog.dmtuan.com/?p=270

2.使用

FW導出圖片利用文件-圖像預覽來導出圖片，類似PS的導出web格式功能。

jpg：

默認是80優化度，這個程度跟PS的60是一樣的，不過有時候會增加些，我一般用84。

png-8：。

png-8導出選項中有分：不透明、索引色透明、alpha透明。

不透明，顧名思義，不說了。

索引色透明中，你可以選擇一個顏色當作色板，那么你選擇的這個顏色會以透明顯示，其他顏色則不透明。

半透明的地方會以色板顏色+半透明顏色的混合值輸出。

如圖，我們使用白色作為索引色，那么這個圓中的文字也同樣變成了透明，這個方面真心PS做的好，我會用個笨辦法，外面畫個白色底，合并平面化所選后用0-實邊的魔術棒把白色刪了再用alpha透明導出。

另外，如果背景是深色調的，會有明顯的白色毛邊出現，這個和PS是一樣的毛病。

重點來了，PNG-8 alpha透明

我使用最多的就是這個模式。

此模式PS是不具備的，這也是FW的強大，此模式下，png-8能支持圖片半透明，也就是說我們可以解決上面白色毛邊問題了??！

所以，個人覺得PNG-8優美的圖片大小今后必將代替PNG-32??！

我上面說了今后，是的，PNG-8 alpha透明還是有它的缺點，依然是IE6，不過這個缺點對比PNG-32的灰底來說已經是好了很多。

PNG-8 ALPHA透明在IE6下會把所有半透明的部分解析成全透明。

所以有些半透明的諸如背景、邊框，還是老老實實的采用png-32，然后濾鏡或者VML處理，直到IE6消亡為止。

當然，更多地方我們可以以優雅降級的思想來處理更多的透明問題。

例如按鈕，小圖標。這些只有邊緣少量半透明像素的東東，其他瀏覽器很完美，就如同PNG-32那樣，IE6中會處理成邊緣像素化。

見google使用的png-8 alpha透明 http://blog.dmtuan.com/demo/google_png8/Google.htm

這是google在紀念牛頓誕辰的時候的皮膚，我們見到，google這里的蘋果用的就是png-8 alpha透明，你可以自行測試IE6和其他瀏覽器的區別。

大跨度漸變失真問題

如圖，當FW導出png-8的時候，漸變有可能產生失真現象，這個時候可采取抖動來消除這個現象，不過抖動后，有時候會產生一些顆粒狀像素，這個時候我就要考慮是否用JPG來代替了，因為這張圖的顏色數可能過于豐富了。

當然，在制作css spirtes拼合圖的時候，可能必須采用png-8來導出，這時顆粒狀像素如果真的無法忍受，那么就導出PNG32再使用PS導出吧，比起質量來說PS要更優化，不過大小就會大很多了。