引言：
提高網頁顯示速度最有效的一個方法是減少頁面的HTTP請求次數，爲了減少HTTP請求次數，最直接有效的方法是使用精靈圖片（CSS sprites），精靈圖片是把許多圖片放到一張大圖片裏面，通過CSS來顯示圖片的一部分。
本文的目的不是闡述精靈圖片如何讓網頁下載更快，而是介紹在創建精靈圖片時的一些實戰經驗。
下面是一張精靈圖片
![CSS Spriting]()
不要等你完成所有工作後再開始使用CSS精靈
在網站全部完成後，你的CSS和圖片也都已經創建好了，這時候你再使用CSS精靈，也就意味着你要返回重寫CSS，並且還要把用到的一大堆圖片再丟到Photoshop裏拼合成一張圖片，這是非常痛苦和乏味的。如果在剛開始構建頁面時就着手使用CSS精靈，那麼一切都會變得簡單。
按圖片顯示相反的方向放置圖片
這一條有點難以理解，我是在創建一張大的精靈圖片中途失敗後才意識到它的。假如一張圖片應該出現在一個元素的左邊，如下圖
請將這張圖片放在精靈的右邊（看上面的示例精靈圖片）。用這種方式處理後，當你用CSS移動背景圖片時，不可能會有別的圖片會（錯誤的）顯示處理。
避免在CSS使用bottom或right定位
當定位CSS精靈中靠後的圖片時，使用類似background-position: bottom -300px; 或者 background-position: right -200px;的方式定位非常容易。最初，這一切都能正常工作，但是，一旦你的CSS精靈寬度或高度增加時，你剛纔使用的定位方式就發現了錯誤，因爲圖片相對右邊或者底邊的距離已經發生了變化。所以，請使用left和top來定位。
爲每張圖片留出足夠空隙
正如你所看到文章中提供的例子精靈圖片一樣，許多小圖片間都預留了很多空白。爲什麼不把圖片擠得緊湊點讓精靈圖片尺寸更小點呢？因爲使用元素的地方可能包含各種不同的內容，這些內容會導致容器變寬變高，預留了足夠的空白的話，在容器大小發生變化時，可以避免其他的圖片顯示出來。
這有一個例子：
每個列表都使用一個數字圖片作爲背景。看看上面的示例CSS精靈，你會發現這幾張圖片是交錯排列的，這樣處理後，不管怎麼增加，其他的圖片都不會顯示出來。
不要擔心CSS精靈的尺寸大小
如果你有機會以標準的web設計來設計你的網站，那麼你必定要將把很多圖片放到精靈圖片上，並且爲這些圖片預覽出合適的空隙，這很好。精靈圖片中的空白空隙不會增加太多文件的體積，在addons.mozilla.org網站上使用的精靈圖片尺寸是1,000×2,000，但它僅16.7kb！