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

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

常用的web圖片格式

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

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

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

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

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

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

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

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

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

比如下圖所示：

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

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

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

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

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

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