說在開頭
上一篇部落格講到了圖檔優化的一些東東。這一片轉載一篇關于圖檔選擇的文章給大家。
前言：
之前個人對于圖檔的問題，一直還是顯得不是很重視。但其實對于網際網路來說，可能圖檔的内容已經占據了整個網際網路的大半部分，是以我們很大一部分流量的消耗，都是用在了圖檔上面，是以，對于圖檔有一些認識肯定是現在所必須的。是以趁今天這個不太忙的機會，打算對于圖檔的問題做一個簡單地總結，也算是對之前沒掌握到的東西的一個學習與備忘過程。
常見的圖檔格式有嗎如下幾種：
PNG，作為想取代gif的新格式，他比我們常用的gif更為優秀。從其名稱中可以看出，APNG其實可以說是會動png，因為png支援24位的顔色，而gif最多僅支援8位的顔色，是以，APNG的顯示效果比gif更為清晰。可惜APNG并沒有加入png标準，是以我們日常生産中很難将其納入使用。
WebP，是由谷歌推出的圖檔格式，想讓其作為web中專用的圖檔格式。與jpg作對比，WebP有對透明的支援，以及完全不亞于JPG的壓縮率。而與PNG對比，WebP更小，加載更快。不過可惜的是，其相容性也是不太友好。
上面兩種格式，因為使用不太多，是以僅僅提及一下。下面将對我們常用的JPG，PNG，以及GIF來做讨論。
JPG
由于jpg的壓縮方式為有損，而我們之前有提及到，圖檔所消耗的流量已經占據了網際網路的半壁江山，是以，jpg自然就成為了web開發中的寵兒。對于圖檔中，沒有透明效果的，以及圖檔更為顔色豐富的圖檔，我們多可以采用壓縮60%-80%的jpg圖像。這樣可以保證使得圖檔更小，網頁加載更快。不過需要注意的是jpg的每一次壓縮，對圖檔都是有損的。是以，對于一些有線條，或者文字的圖檔，jpg壓縮之後，看起來并不理想，是以，在這種情況下，應該盡量避免對jpg的使用。
GIF
GIF僅有256種顔色，并且對透明對支援僅僅局限于全透明或者不透明，是以，gif若作為非動圖來說，隻能用于顔色不太複雜的圖檔。不過一般來說，我們用gif都是由于其對動畫的友好支援，在APNG相容性十分不友好的情況下，如果僅僅想引入一個動圖的話，gif是目前很好的選擇。
png
1.格式：
png的格式可以分為以上幾種，而我們常用的便是png8與png32了（即是我們常在ps中導出的png24）
2.透明
3.PNG32
我們在ps中導出的png24勾上透明選項後，即是這裡所說的png32了，而png32實際上是指的png24位的深度，以及8位的alpha透明通道。因為png32顔色的豐富性（2^24種顔色）,以及對各種透明的友好支援。png32是我們許多人最常用的格式之一。其導出方法也很簡單，隻用在ps中選擇導出為web所用格式，選中png24+透明即可。然而png32在ie6上并不能表現為透明。
4.PNG24
其實png24本身是不透明的，因為其并沒有那8位的alpha通道。在fireworks中我們可以很好地看到這一特點。
圖中下面為png32，上面為png24
png8由于僅有2^8種顔色，是以體積較小，同時，他還對透明有比較友好的支援，是以，png8也是很多人喜歡使用的圖檔格式。
png8+alpha透明png8的alpha透明，由于不能夠使用ps來進行導出，是以我們需要使用fireworks來導出。這次，我選擇了一張黑色的透明背景來對透明的支援做一次比對。
圖中下為png32，上為png8+alpha透明
可以看出，png8對于半透明，有不錯的支援性。
同時，因為其比較小的體積。在現代浏覽器上，對于顔色不太複雜的小按鈕之類的的東西，以及對于圖檔的要求并沒有那麼高的移動端端來說png+alpha透明也是顯得十分友好的。當然，對于顔色較為複雜，以及要求較為嚴格的pc端上需要采用的東西，我認為還是應該采用png32的好。
不過alpha透明的png8在ie6上的表現并不如人意，在ie6上，其半透明處會以全透明來顯示，并且毛邊嚴重。之前也提及到了，png8的alpha透明對于半透明，隻是有不錯的支援性，其真正的表現事實上還是不如png32。在我測試過程中發現，png8采用alpha透明，依然會出現一些毛邊。
png8+索引透明
png8的索引透明終于可以用ps來進行導出了，導出方式也很簡單。導出的時候直接選擇ps的png8或者ps預設的png-8 128仿色。此時我們就可以導出索引透明的png8了。如下圖
左邊的png32的圖與右邊png8的圖對比可以看出，右邊的圖明顯有一些鋸齒。原因是索引透明對于透明的支援并不完善，其僅僅支援全透明以及全不透明，而不支援半透明。當選擇了雜邊為無的時候，所有的半透明轉換為了不透明，也就産生了鋸齒。那如何解決這些鋸齒呢？
剛剛将四周白色，變為無的雜邊的選項，其實就是ps對于鋸齒的一個解決方法。如果這張圖的需求是在純色的背景下的話，我們可以将雜邊，改為該圖在網頁中所在的背景的顔色，以做到在視覺上的一種無鋸齒的感覺。這種方案在ie6下也可以很好地實作，不過也有他的局限性——倘若背景顔色比較複雜，那麼這種方案将會無效。
圖檔的選擇
那麼就總體來說下圖檔格式的選擇應用場景吧（雖然上面多少都有些提到了）
- 關于jpg由于其可壓縮的特點，對于背景顔色較為複雜（比如照片等圖）并且沒有透明的圖檔，建議采用jpg。這樣在保證了圖檔肉眼幾乎看不出很大差別的情況下，把圖檔壓得更小，壓縮更快。不過對于有線條及文字的内容，不推薦用jpg。
- 關于gif如果需要動圖的話，由于APNG對相容性對不友好gif依然還是首選。
- 關于png
- png8+alpha可以加入日常的開發中。對于桌面端，在不用考慮ie6的情況下，alpha透明的png8可以用在一些圖檔顔色較為簡單的地方。對于移動端，可以考慮直接采用alpha透明的png8，而不采用png32，因為移動端的網絡相較pc端較差，是以，采用png8+alpha可以節省流量。
- png32在桌面端中，還是可以作為主要的圖檔格式。因為桌面端相較于移動端，網速更友好，同時，顯示器的浏覽對于圖檔的精細程度要求更高，是以，一些比較複雜的按鈕，logo還是應當采用png32來處理
- png8+索引透明可以用來處理桌面端對于低版本浏覽器的（ie6）的相容問題，雖然采用背景雜邊的方式隻能解決部分鋸齒問題，但總好過于無。ie6已然是很早之前的浏覽器，本身對其的相容就勢必會犧牲一些東西。是以，個人感覺還是對于背景簡單的，直接采用雜邊的方式來解決，而對于背景較為複雜的，目前我也隻能想到采用去掉雜邊的方法去解決（其實也就是說鋸齒直接不管了）。
結束的話
……恩，對于圖檔的總結應該是還沒有結束的。這裡就隻能寫到這麼多了。還有關于體積更小，效果更好的WebP，以及對于這種圖檔方案與前端自動化工具的結合還沒有納入實踐……嗯，搞不好哪天懶癌治好了就繼續寫了。