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

1. png

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

2. jpg

Jpg和jpeg是同一(yī)種，是有損壓縮的點陣圖，它靠損失圖片本身的質量來減小(xiǎo)圖片的體(tǐ)積，造成反複保存圖片質量下(xià)降文圖。不支持透明度。但它色彩豐富，文件小(xiǎo)，适用于照片，色彩豐富的圖片。

3. git

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

4. webp

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

5. svg

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

6. BMP

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