圖片問題的一些總結
前言： 之前個人對於圖片的問題，一直還是顯得不是很重視。但其實對於互聯網來說，可能圖片的內容已經占據了整個互聯網的大半部分，因此我們很大一部分流量的消耗，都是用在了圖片上面，因此，對於圖片有一些認識肯定是現在所必須的。所以趁今天這個不太忙的機會，打算對於圖片的問題做一個簡單地總結，也算是對之前沒掌握到的東西的一個學習與備忘過程。
常見的圖片格式
| 圖片格式 | 壓縮方式 | 動畫 | 適應瀏覽器 |
|---|---|---|---|
| JPG | 有損 | 不支持 | 所有 |
| PNG | 無損 | 不支持 | 所有 |
| GIF | 無損 | 支持 | 所有 |
| APNG | 無損 | 支持 | firefox、safari |
| WebP | 有損/無損 | 支持 | chrome、opera |
APNG，作為想取代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
-
格式
格式 位數 透明支持 png8 8 不支持 png8+索引透明 8 僅支持完全透明 png8+alpha透明 8 支持 png24 24 不支持 png32 32 支持 png的格式可以分為以上幾種，而我們常用的便是png8與png32了（即是我們常在ps中導出的png24）
-
透明
-
png32
我們在ps中導出的png24勾上透明選項后，即是這里所說的png32了，而png32實際上是指的png24位的深度，以及8位的alpha透明通道。因為png32顏色的豐富性（2^24種顏色）,以及對各種透明的友好支持。png32是我們許多人最常用的格式之一。其導出方法也很簡單，只用在ps中選擇導出為web所用格式，選中png24+透明即可。然而png32在ie6上並不能表現為透明
-
png24
其實png24本身是不透明的，因為其並沒有那8位的alpha通道。在fireworks中我們可以很好地看到這一特點
圖中下面為png32，上面為png24 -
png8
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+alpha透明的圖片比起下面png32的圖片還是多了一些鋸齒。不過整體影響不算太大。 -
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，以及對於這種圖片方案與前端自動化工具的結合還沒有納入實踐……嗯，搞不好哪天懶癌治好了就繼續寫了。