作爲一個文件提供大量小圖像

Question

簡單。當HTML頁面包含大量小圖片時，需要一段時間才能完成渲染，特別是因爲每個文件都需要單獨請求。例如，如果您要顯示500個32x32的頭像圖片，那麼瀏覽器需要執行500個包含500個頭的請求，從而產生500個也包含頭的響應。因此，很多交通。
爲了減少交通量，我認爲這將是更好的所有文件發送作爲一個請求/響應，並有一些客戶端腳本做任何需要的地方這個文件放到單獨的圖像，的分裂放置。因此，瀏覽器執行腳本，腳本請求圖像包，服務器返回包，然後腳本將這些圖像放在適當的位置。因此，一個請求/響應而不是500個請求/響應。
已經創建了類似的東西嗎？如果是的話，由誰？

Answer 1

它被稱爲CSS-精靈，基本上你有一個格子圖案和CSS規則來獲得你想要的所有圖像大圖像。

檢查

http://spritegen.website-performance.org/

http://csssprites.com/

Answer 2

作爲替代CSS的精靈（爲了完整性），如果你不需要IE7的支持，您可以嵌入圖片到HTML作爲data：// URIs。你需要BASE64對它們進行編碼，但是在平均30個字節的GIF子彈中，它可能並不那麼糟糕。