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

1. png

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

2. jpg

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

3. git

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

4. webp

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

5. svg

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

6. BMP

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