隨著web的發(fā)展，網(wǎng)站資源的流量也變得越來(lái)越大。據(jù)統(tǒng)計(jì)，60%的網(wǎng)站流量均來(lái)自網(wǎng)站圖片，可見(jiàn)對(duì)圖片合理優(yōu)化可以大幅影響網(wǎng)站流量，減小帶寬消耗和服務(wù)器壓力。

一、現(xiàn)有web圖片格式

我們先來(lái)看下現(xiàn)在常用的web圖片的格式：

幾種文件格式的特點(diǎn)概述

baseline-jpeg

這種類(lèi)型的JPEG文件存儲(chǔ)方式是按從上到下的掃描方式，把每一行順序的保存在JPEG文件中。打開(kāi)這個(gè)文件顯示它的內(nèi)容時(shí)，數(shù)據(jù)將按照存儲(chǔ)時(shí)的順序從上到下一行一行的被顯示出來(lái)，直到所有的數(shù)據(jù)都被讀完，就完成了整張圖片的顯示。如果文件較大或者網(wǎng)絡(luò)下載速度較慢，那么就會(huì)看到圖片被一行行加載的效果，這種格式的JPEG沒(méi)有什么優(yōu)點(diǎn)，因此，一般都推薦使用Progressive JPEG

preogressive-jpeg

和Baseline一遍掃描不同，Progressive JPEG文件包含多次掃描，這些掃描順尋的存儲(chǔ)在JPEG文件中。打開(kāi)文件過(guò)程中，會(huì)先顯示整個(gè)圖片的模糊輪廓，隨著掃描次數(shù)的增加，圖片變得越來(lái)越清晰。這種格式的主要優(yōu)點(diǎn)是在網(wǎng)絡(luò)較慢的情況下，可以看到圖片的輪廓知道正在加載的圖片大概是什么。

__這兩種jpeg格式文件的效果對(duì)比如下：

jpeg優(yōu)勢(shì)： 非常通用，JPEG在色調(diào)及顏色平滑變化的相片或是寫(xiě)實(shí)繪畫(huà)（painting）上可以達(dá)到它最佳的效果。

jpeg劣勢(shì)： 它并不適合于線條繪圖（drawing）和其他文字或圖示（iconic）的圖形,因?yàn)樗膲嚎s方法用在這些圖形的型態(tài)上,會(huì)得到不適當(dāng)?shù)慕Y(jié)果；

gif

GIF(Graphics Interchange Format)的原義是“圖像互換格式”，GIF文件的數(shù)據(jù)，是一種基于LZW算法(串表壓縮算法)連續(xù)色調(diào)的無(wú)損壓縮格式。是目前web網(wǎng)頁(yè)中十分常用的一種動(dòng)畫(huà)文件格式。 優(yōu)勢(shì)：

優(yōu)秀的壓縮算法使其在一定程度上保證圖像質(zhì)量的同時(shí)將體積變得很小 可插入多幀,從而實(shí)現(xiàn)動(dòng)畫(huà)效果

可設(shè)置透明色以產(chǎn)生對(duì)象浮現(xiàn)于背景之上的效果

劣勢(shì)：　由于采用了8位壓縮,最多只能處理256種顏色（2的8次方）,故不宜應(yīng)用于真彩圖像。

png

png文件分為png8(8位透明png)、png24(256色png)、png32(多階透明png)，png的有點(diǎn)在于使用位圖實(shí)現(xiàn)web上的透明圖片，以實(shí)現(xiàn)比較好的體驗(yàn)。

優(yōu)勢(shì)：

• 支持256色調(diào)色板技術(shù)以產(chǎn)生小體積文件
• 最高支持48位真彩色圖像以及16位灰度圖像。
• 支持Alpha通道的半透明特性。
• 支持圖像亮度的gamma校正信息。- 支持存儲(chǔ)附加文本信息,以保留圖像名稱(chēng)、作者、版權(quán)、創(chuàng)作時(shí)間、注釋等信息。
• 使用無(wú)損壓縮。
• 漸近顯示和流式讀寫(xiě),適合在網(wǎng)絡(luò)傳輸中快速顯示預(yù)覽效果后再展示全貌。
• 使用CRC循環(huán)冗余編碼防止文件出錯(cuò)。
• 最新的PNG標(biāo)準(zhǔn)允許在一個(gè)文件內(nèi)存儲(chǔ)多幅圖像。

劣勢(shì)：

• 但也有一些軟件不能使用適合的預(yù)測(cè)，生成的文件較大(IE6只支持PNG8)

webp

目前移動(dòng)端Android4.0以上、PC端chorme 10+（14 ~ 16 有渲染bug）、opera 11+ 、safri均支持webp格式圖片。 WEBP與JPG相比較，編碼速度慢10倍，解碼速度慢1.5倍，而絕大部分的網(wǎng)絡(luò)應(yīng)用中，圖片都是靜態(tài)文件，所以對(duì)于用戶(hù)使用只需要關(guān)心解碼速度即可。但實(shí)際上，webp雖然會(huì)增加額外的解碼時(shí)間，但是由于減少了文件體積，縮短了加載的時(shí)間，實(shí)際上文件的渲染速度反而變快了。

webp上目前可行的應(yīng)用場(chǎng)景：

-1.客戶(hù)端軟件，內(nèi)嵌了基于Chromium的webview，這類(lèi)瀏覽器中應(yīng)用的網(wǎng)頁(yè)是可以完全使用webp格式，提升加載渲染速度，不考慮兼容。

-2.用node-webkit開(kāi)發(fā)的程序，用webp可以減少文件包的體積。

-3.移動(dòng)應(yīng)用 或 網(wǎng)頁(yè)游戲 ,界面需要大量圖片,可以嵌入webp的解碼包,能夠節(jié)省用戶(hù)流量，提升訪問(wèn)速度優(yōu)勢(shì)：

- 對(duì)于png圖片,webp比png小了45%,但是缺點(diǎn)是你壓縮的時(shí)候需要的時(shí)間更久了；劣勢(shì)：

- 兼容性不太好, 只有opera,和chrome支持;

apng

簡(jiǎn)單來(lái)講apng格式圖片使用多個(gè)單張png連接起來(lái)的動(dòng)畫(huà)圖片格式，支持全透明通道動(dòng)畫(huà)。相比于gif動(dòng)畫(huà)，沒(méi)有毛刺，質(zhì)量更高，但目前支持的瀏覽器并不完全?？梢匀an i use查看其兼容性。目前可用性相對(duì)較低，適用于對(duì)動(dòng)畫(huà)質(zhì)量要求很高的情況。