做前端的稍微有點經驗的都知道 可以通過合並小圖片 來減少請求數，
最早可能都是通過 fw、ps 等工具來手動合並，
這種方式的缺點就不吐槽了，效率低，可維護性差 等等 ....
一些很厲害的人，往往會開發出很厲害的程序，來解決重復性的勞動，
1. https://github.com/iazrael/ispriter
4. more ...
這些工具，我都稍微了解過，但最后覺得比較好使（適合自己）的是 SmartSprites(http://csssprites.org/)
個人覺得它的好處：
1. 語法簡易，控制靈活；
/** sprite: icon-14; sprite-image: url('../images/components/icon-14.png'); */
首先定義 一個合並圖片，定義內容包含，合並標識，合並圖片生成地址，還有更多參數，比如：縱向還是橫向合並，圖片名字是否自動生成等 ....
.icon-add-14
{
background-image:url('@{bg-components-srpite-url}icon-add-14.png'); /** sprite-ref: icon-14;*/
}
.icon-batch-delete-14
{
background-image:url('@{bg-components-srpite-url}icon-batch-delete-14.png'); /** sprite-ref: icon-14;*/
}
使用時只需要在正常 gackgrund-image 后面加上 特定的注釋語法，sprite-ref 指向開始的 sprite 定義，標識那幾個小圖合並到同一張圖上，
這個也有更多的參數，比如：position 方式，margin 值 等等 .....
這樣看起來是不是很簡單明了，完全不破壞你原有的寫法，只是增加注釋而已！
2. 基於 cmd 命令，任何程序都可以調用
smartsprites.cmd --root-dir-path xxx --output-dir-path xxx --css-file-suffix ""
指定一個 css 文件目錄，指定一個輸出目錄，指定一個 css 文件生成后綴
當然這貨也是有缺點的：
1. 基於 java ，所以必須需要 jre ；
2. 生成的 css 文件不能直接覆蓋還有 css 文件，所以需要兩個目錄，一個 css 源目錄，一個 css 輸出目錄；
3. 它是居於 css 注釋語法，比如使用 Less 編譯后 就會破壞其 注釋語法， 這個我已經有處理 grunt-contrib-less-smartsprite
更多文檔請移步 http://csssprites.org/
如果在使用 smartsprite 過程中有什么疑問，可以留言，共同討論！