前端圖片選擇問題

圖片問題的一些總結

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

常見的圖片格式

圖片格式	壓縮方式	動畫	適應瀏覽器
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，以及對於這種圖片方案與前端自動化工具的結合尚未歸入實踐……嗯，搞很差哪天懶癌治好了就繼續寫了。