在開始講解之前要普及一個知識 索引透明顏色和Alpha透明通道
索引透明顏色：百度百科給的解釋是點陣圖圖片的一種編碼方法，需要基於RGB、CMYK等更基本的顏色編碼方法。可以通過限制圖片中的顏色總數的方法實現有失真壓縮。挑選一副圖片中最有代表性的若干種顏色（通常不超過256種），編製成顏色表。 我個人對這句話的理解就是在生成這張圖片的時候會找一系列與你圖片接近的顏色（不超過256種顏色）然後重新組合成一張圖片很明顯，說到這裡如果是索引顏色的編碼方式註定這張照片的質量不是很高，所以最好是向量圖的時候使用。
而索引透明顏色其實就跟索引紅色，黑色，綠色是同一種表現性質的顏色，只不過它的表現形式是透明。IE6就支援索引透明色，而GIF和PNG就是索引編碼方式的圖，片所以該類圖片的透明塊在IE6是可以展現的相對美好的。你也可以對現有的圖片強行轉換成索引顏色編碼方式，會發現圖片細節變的十分不能忍受
（原本的）
（轉換後）
Alpha透明通道：一個8位的灰度通道，該通道用256級灰度來記錄影象中的透明度資訊，定義透明、不透明和半透明區域，其中黑表示透明，白表示不透明，灰表示半透明。
它是通過紅綠藍三個通道的亮度來展現圖片。注意三個通道和主通道（RGB）一樣，用來儲存顏色資訊，只不過他們最後還是要合併到主通道去。
JPG:
優點:體積比PNG24小,但是比gif大很多，開啟速度比PNG24快,能展示1600萬種顏色。
缺點:有失真壓縮，每次儲存都會有資料損失, 所以儘量不要多次儲存。不然影象會失真。無法支援動態圖。
適用區域：適合需要高保真展示的圖片。色彩豐富的大圖片
不適用區域：ICON類的小標籤會加重下載量
GIF：
優點： 支援動態圖，體積小
缺點：它是索引顏色的編碼方法，所以只能擁有256種顏色，如果用於大圖展示就會看起來很渣。但是由於其體積小所以可以用於小ICON的展示。
適用區域：動態圖，小ICON，向量圖。
不適用區域：需要高保真展示的圖片如商品展示。
PNG8/PNG24:
PNG8用的也是索引顏色編碼方式，如果不是GIF支援動畫其實PNG8完全可以勝過GIF。但是如果是同樣的圖片下，PNG8的更小。PNG8有1位的布林透明通道（要麼完全透明，要麼完全不透明）。
PNG24用的就是Alpha透明通道,就是有8位（256階）的布林透明通道（所謂半透明），它也有1600萬種顏色而且是無失真壓縮。看看下面的對比圖，一圖勝前言。
（PNG8）、
（PNG24）
適用區域：尺寸小的，色彩不豐富的圖片最好就用PNG8例如小icon。有半透明需求的就用PNG24嗎，而且如果改圖片需要頻繁下載儲存的最好就用PNG24因為它是無失真壓縮。
不適用區域：如果是特別大的而且需要展現多色彩的圖片不適用於PNG8。對圖片大小有要求的就最好不要用PNG24。
webp:是一種旨在加快圖片載入速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，並能節省大量的伺服器頻寬資源和資料空間（乍看之下感覺是為了移動和大流量入口網站而生啊）。
在新的出的編碼規則下webp支援有損和無失真壓縮，但相同質量的圖片下。webp的圖片體積比JPG和PNG小40%左右（這不就印證了我剛剛說的為了移動和大流量入口網站而生的定論嗎！！！畢竟流量都是錢啊！！！）
美中不足的是，WebP格式影象的編碼時間“比JPEG格式影象長8倍”，而且目前安卓5.0以下版本相容有時候有問題，且在低端手機解析webp圖片的時候cpu的使用率將在20%-36%之間波動。（那移動端的適用領域不就瞬間定格在Iphone和安卓旗艦機，(╬▔皿▔)這讓小米和魅族的低端型號手機情何以堪。。。 ）
但是根據以往的經驗PNG 格式的表情使用 CPU 波動比較大。從搜查到的資料來看 WebP 格式表情佔用的 CPU 會比 PNG 表情的佔用率大 ，因為webp使用一種高階預測編碼方法對圖片進行編碼，這種方法使用臨近畫素塊中的值來預測當前塊中的影象值，然後只需要對這種差異進行編譯耗時但是質量好導致CPU佔用率大。
WebP 使用的是 Fancy 取樣演算法，既然是取樣演算法必然有采樣區塊，而 JPEG 的取樣區塊是 8*8，對於原始圖片的長寬不是 8 的倍數，都需要先補成 8 的倍數，使其能一塊塊的處理，所以對於 8 的整數倍的圖片，壓縮會更高效。而webp的取樣區塊是16n*16n所以選擇 256*256 或者 192*192 能獲得更高的 WebP 壓縮效率。（這不是表情包的大小嗎？難道google的潛意思是讓我們對錶情包用webp？）.
webp也支援動態圖
目前 Animated WebP 支援將 GIF 直接轉換成 Animated WebP，或者將多張 WebP 圖片組合成 Animated WebP。與傳統的 GIF 圖比較，Animated WebP 的優勢在於
①體積更小，GIF 轉成有損 Animated WebP 後可以減小 64% 的體積，轉成無損可以節省 19% 的體積
②顏色更豐富，支援 24-bit 的 RGB 顏色以及 8-bit 的 Alpha 透明通道（而 GIF 只支援 8-bit RGB 顏色以及 1-bit 的透明）（終於不是gif一家獨大了，而且還更小！webp看來想做霸主了！）
當然他的確定目前也是很大的，
①消耗較多的 CPU 和解碼時間（多 1.5~2.2 倍）
②和 GIF 相比起來支援度還不夠，目前仍無法通用
綜上所述有以下的適用區域總結
①大流量入口網站且無需有過多相容瀏覽器的需求
②針對高階使用者機型的使用者推廣活動頁面
我的個人部落格：http://zengjinchao.com/wordpress/