了解常用的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
全站高品質(zhì)素材免費(fèi)下載!