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

1. png

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

2. jpg

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

3. git

git格式是無損壓縮的點陣圖，靠損失圖片的色彩數(shù)量來減小圖片的體積，支持透明，支持動畫，沒有兼容性問題。GIF格式適用于對色彩要求簡單同時需要文件體積較小的場景以及動態(tài)圖片。

4. webp

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

5. svg

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

6. BMP

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