產(chǎn)品設(shè)計師必備知識分享:WEB圖片常用格式與差異

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

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

顏色艷麗的APP icon

 

常用的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)境中進行的功能降級處理。

比如下圖所示:

026821581720a3a84a0e282b06665f

 

 

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

0291335817208ca84a0e282b6128aa

 

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

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

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

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

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

 

 

 

每天更新,
全站高品質(zhì)素材免費下載!