在許多web頁(yè)面中可以發(fā)現(xiàn)圖片占到了頁(yè)面大小的60%-70%，圖片的格式種類非常多，本文對(duì)網(wǎng)頁(yè)中常見(jiàn)的png、jpg、gif、webp、svg、BMP格式及其使用場(chǎng)景進(jìn)行介紹。

1. png

png格式是無(wú)損壓縮的點(diǎn)陣圖，它是靠損失圖片的色彩數(shù)量來(lái)減小圖片的體積，且它的壓縮比高，生成文件體積小，支持透明度，不支持動(dòng)畫(huà)。png格式經(jīng)常用于呈現(xiàn)如logo，顏色簡(jiǎn)單且對(duì)比強(qiáng)烈，需要清晰顯示文字的圖片。

2. jpg

Jpg和jpeg是同一種，是有損壓縮的點(diǎn)陣圖，它靠損失圖片本身的質(zhì)量來(lái)減小圖片的體積，造成反復(fù)保存圖片質(zhì)量下降文圖。不支持透明度。但它色彩豐富，文件小，適用于照片，色彩豐富的圖片。

3. git

git格式是無(wú)損壓縮的點(diǎn)陣圖，靠損失圖片的色彩數(shù)量來(lái)減小圖片的體積，支持透明，支持動(dòng)畫(huà)，沒(méi)有兼容性問(wèn)題。GIF格式適用于對(duì)色彩要求簡(jiǎn)單同時(shí)需要文件體積較小的場(chǎng)景以及動(dòng)態(tài)圖片。

4. webp

Webp格式是谷歌開(kāi)發(fā)的一種新圖片格式，它同時(shí)支持有損和無(wú)損壓縮的點(diǎn)陣圖。支持動(dòng)畫(huà)，支持透明，但它存在瀏覽器兼容問(wèn)題，只有基于webkit內(nèi)核的瀏覽器才支持（僅Chrome內(nèi)核，Edge,oprea,Android支持）。在不考慮兼容問(wèn)題下，它是最優(yōu)方式不論是在細(xì)節(jié)豐富，透明，還是動(dòng)態(tài)圖，都行。

5. svg

svg是無(wú)損的矢量圖,它由直線和曲線以及繪制方法組成的XML格式定義的圖，在放大或者改變尺寸的情況下，圖片質(zhì)量不會(huì)發(fā)生損失。在<svg>標(biāo)簽中繪制，它適用于圖標(biāo)，以及可以實(shí)現(xiàn)通過(guò)css對(duì)圖添加效果，不丟失細(xì)節(jié)，線條光滑不存在鋸齒要求的圖。

6. BMP

BMP是無(wú)損的點(diǎn)陣圖。支持索引色和直接色。它幾乎沒(méi)有對(duì)數(shù)據(jù)進(jìn)行壓縮，所以它通常是較大的文件。但現(xiàn)在已經(jīng)很少使用了。