了解常用的web圖片格式以及各種的用途，幫助產(chǎn)品設(shè)計師和前端工程師提升web和APP產(chǎn)品的加載性能。

眾所周知，從性能優(yōu)化角度來說，圖片優(yōu)化絕對是重點之一，優(yōu)化圖片能極大的節(jié)約寬帶提升性能。

常用的web圖片格式

圖片格式多種多樣，其自身的優(yōu)缺點決定了使用場景及環(huán)境，在什么情況下采用何種的圖片格式，是我們作對的第一步，首先從了解他們?nèi)胧郑?

JPEG是第一個國際圖像壓縮標(biāo)準(zhǔn)，.jpg和.jpeg是JPEG文件壓縮封存后常見的圖片格式，均為有損壓縮，且會產(chǎn)生迭代有損。JPEG可通過不同的壓縮比，去除圖像的部分信息和色彩數(shù)據(jù)，來降低原有文件的大小，同樣設(shè)計師也可以根據(jù)具體情況在圖像質(zhì)量和文件大小之間找到平衡，特別適用于層次豐富，色彩較多的圖像。

同時，JPEG 是Web 上僅次于GIF 的常用圖像格式。

JPEG2000?，作為JPEG的升級版，它具備更高壓縮率，同時支持有損、無損壓縮和漸進傳輸?shù)墓δ芗捌渌绿匦?，必須是取代JPEG的節(jié)奏。

PNG，是一種無損壓縮的位圖格式，支持索引、RGB、灰度和Alpha通道等特性，具有較高的壓縮空間，保真效果好，支持透明，且定義了256個透明層次。 適用于色彩簡單，對比強烈的圖片，像圖標(biāo)icon等，PNG也可以被用來無失真的儲存照片，但文件較太大并不適合網(wǎng)絡(luò)呈現(xiàn)（像珍貴圖像等其他所需另當(dāng)別論）

GIF，常用于圖像動畫，具有高壓縮比的特性，占用空間小，保存的圖像只支持256色，會損失大量細節(jié)，但利于下載，組成的動畫適合網(wǎng)絡(luò)傳播。

GIF 是Web 上最常用的圖像格式，它可以用來存儲各種圖像文件。特別適用于存儲線條、圖標(biāo)和電腦生成的圖像、卡通和其它有大色塊的圖像。

SVG，矢量圖形格式，能夠清晰的顯示在任何分辨率設(shè)備，無需適配。SVG，是一種基于XML（可擴張性標(biāo)記）的語言，采用文本傳輸且可被搜索，支持多種編輯（色彩變化，動畫效果等）具有較強的交互和動態(tài)性 。

WebP，2010年由谷歌開發(fā)，文件壓縮方面比JPEG更加優(yōu)越，同時支持有損和無損壓縮，但解碼時間卻相對較慢。 此前有eBay團隊的測試，同時顯示50張同質(zhì)量的WebP和jpg，WebP比jpg顯示快了2倍多，WebP雖然會增加解碼的時長，但減少了文件體積，縮短了加載時間，以致實際渲染速度更快。谷歌家的產(chǎn)物，且未被Web標(biāo)準(zhǔn)采納，其他平臺及瀏覽器的支持性相對較差，但可以在不支持的環(huán)境中進行的功能降級處理。

比如下圖所示：

以下對上述常用的圖片格式做了簡單的對比總結(jié)：

在實際項目當(dāng)中，我們都會要求提供最小的圖片，有些時間需要對圖片進行壓縮。

25學(xué)堂推薦了很多個在線壓縮圖片的網(wǎng)站：

1、推薦一個APP切圖文件的PNG壓縮工具-Pnggauntlet

2、手機APP設(shè)計必備圖片壓縮神器-TinyPNG

3、實用的圖片批量壓縮優(yōu)化工具—JPGmini、Punypng和PNGmini