前言： 之前個人對于圖片的問題，一直還是顯得不是很重視。但其實對于互聯網來說，可能圖片的內容已經占據了整個互聯網的大半部分，因此我們很大一部分流量的消 耗，都是用在了圖片上面，因此，對于圖片有一些認識肯定是現在所必須的。所以趁今天這個不太忙的機會，打算對于圖片的問題做一個簡單地總結，也算是對之前 沒掌握到的東西的一個學習與備忘過程。

常見的圖片格式

圖片格式壓縮方式動畫適應瀏覽器

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

• png8png8由于僅有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已然是很早之前的瀏覽器，本身對其的兼容就勢必會犧牲一些東西。因此，個人感覺還是對于背景簡單的，直接采用雜邊的方式來解決，而對于背景較為復雜 的，目前我也只能想到采用去掉雜邊的方法去解決（其實也就是說鋸齒直接不管了）。

文章源自：http://web.jobbole.com/83670/

總結

以上是生活随笔為你收集整理的图片问题的一些总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。