1. 前言

本節簡單介紹一下Css Sprite涉及到圖片的格式以及圖片的排列等，尤其是圖片的排列將決定你的開發難易度，如果可以的話盡可能將圖片制作成推薦的格式。

2. 簡介

xxx.jpg 應該是目前最常見的一種圖片格式了，它屬于有損壓縮格式。
jpg 能夠將圖像壓縮在很小的儲存空間，一定程度上會造成圖像數據的損傷。尤其是使用過高的壓縮比例，將使最終解壓縮后恢復的圖像質量降低。

3. JPG 圖片優點

然而隨著時代的發展，目前的 JPEG 壓縮技術十分先進，它可以用有損壓縮方式去除冗余的圖像數據，換句話說，就是可以用較少的磁盤空間得到較好的圖像品質。

所以這十分適合用在網絡傳輸等場景，因為圖片比較小所以具有傳輸速度快、減輕帶寬壓力等優勢。

4. JPG 圖片缺點

但是它也有一個比較致命的缺點：那就是這個圖片永遠都是有顏色的，換句話說就是不支持透明背景。

在 PS 中，上圖就是一張 JPG 圖片，因為白色也是顏色。而下圖這樣才代表沒有顏色，代表透明：

5. 小結

所以它適用于一些對背景色不敏感的場景，比如大部分網站背景色都是白的，這時候就可以使用 JPG 格式的Css Sprite啦。但是一般很少有人會這么干，所以下一種格式會更加常用。