隨著web的發展，網站資源的流量也變得越來越大。據統計，60%的網站流量均來自網站圖片，可見對圖片合理最佳化可以大幅影響網站流量，減小頻寬消耗和伺服器壓力。
一、現有web圖片格式
我們先來看下現在常用的web圖片的格式：
幾種檔案格式的特點概述
baseline-jpeg
這種型別的JPEG檔案儲存方式是按從上到下的掃描方式，把每一行順序的儲存在JPEG檔案中。開啟這個檔案顯示它的內容時，資料將按照儲存時的順序從上到下一行一行的被顯示出來，直到所有的資料都被讀完，就完成了整張圖片的顯示。如果檔案較大或者網路下載速度較慢，那麼就會看到圖片被一行行載入的效果，這種格式的JPEG沒有什麼優點，因此，一般都推薦使用Progressive JPEG
preogressive-jpeg
和Baseline一遍掃描不同，Progressive JPEG檔案包含多次掃描，這些掃描順尋的儲存在JPEG檔案中。開啟檔案過程中，會先顯示整個圖片的模糊輪廓，隨著掃描次數的增加，圖片變得越來越清晰。這種格式的主要優點是在網路較慢的情況下，可以看到圖片的輪廓知道正在載入的圖片大概是什麼。
__這兩種jpeg格式檔案的效果對比如下：
jpeg優勢： 非常通用，JPEG在色調及顏色平滑變化的相片或是寫實繪畫（painting）上可以達到它最佳的效果。
jpeg劣勢： 它並不適合於線條繪圖（drawing）和其他文字或圖示（iconic）的圖形,因為它的壓縮方法用在這些圖形的型態上,會得到不適當的結果；
gif
GIF(Graphics Interchange Format)的原義是“影像互換格式”，GIF檔案的資料，是一種基於LZW演算法(串表壓縮演算法)連續色調的無失真壓縮格式。是目前web網頁中十分常用的一種動畫檔案格式。 優勢：
優秀的壓縮演算法使其在一定程度上保證影像質量的同時將體積變得很小 可插入多幀,從而實現動畫效果
可設定透明色以產生物件浮現於背景之上的效果
劣勢： 由於採用了8位壓縮,最多隻能處理256種顏色（2的8次方）,故不宜應用於真彩影像。
png
png檔案分為png8(8位透明png)、png24(256色png)、png32(多階透明png)，png的有點在於使用點陣圖實現web上的透明圖片，以實現比較好的體驗。
優勢：
- 支援256色調色盤技術以產生小體積檔案
- 最高支援48位真彩色影像以及16位灰度影像。
- 支援Alpha通道的半透明特性。
- 支援影像亮度的gamma校正資訊。- 支援儲存附加文字資訊,以保留影像名稱、作者、版權、創作時間、註釋等資訊。
- 使用無失真壓縮。
- 漸近顯示和流式讀寫,適合在網路傳輸中快速顯示預覽效果後再展示全貌。
- 使用CRC迴圈冗餘編碼防止檔案出錯。
- 最新的PNG標準允許在一個檔案記憶體儲多幅影像。
劣勢：
- 但也有一些軟體不能使用適合的預測，生成的檔案較大(IE6只支援PNG8)
webp
目前移動端Android4.0以上、PC端chorme 10+（14 ~ 16 有渲染bug）、opera 11+ 、safri均支援webp格式圖片。 WEBP與JPG相比較，編碼速度慢10倍，解碼速度慢1.5倍，而絕大部分的網路應用中，圖片都是靜態檔案，所以對於使用者使用只需要關心解碼速度即可。但實際上，webp雖然會增加額外的解碼時間，但是由於減少了檔案體積，縮短了載入的時間，實際上檔案的渲染速度反而變快了。
webp上目前可行的應用場景：
-1.客戶端軟體，內嵌了基於Chromium的webview，這類瀏覽器中應用的網頁是可以完全使用webp格式，提升載入渲染速度，不考慮相容。
-2.用node-webkit開發的程式，用webp可以減少檔案包的體積。
-3.移動應用 或 網頁遊戲 ,介面需要大量圖片,可以嵌入webp的解碼包,能夠節省使用者流量，提升訪問速度優勢：
- 對於png圖片,webp比png小了45%,但是缺點是你壓縮的時候需要的時間更久了；劣勢：
- 相容性不太好, 只有opera,和chrome支援;
apng
簡單來講apng格式圖片使用多個單張png連線起來的動畫圖片格式，支援全透明通道動畫。相比於gif動畫，沒有毛刺，質量更高，但目前支援的瀏覽器並不完全。可以去can i use檢視其相容性。目前可用性相對較低，適用於對動畫質量要求很高的情況。