Big CSS Sprite圖片（在低CPU電腦中運行緩慢）

Question

我的網站有一個很大的css sprite圖片。

網站：http://www.protohaber.com/demo

雪碧圖片：http://www.protohaber.com/demo/templates/v1/images/proto_sprite.png

我的網站是工程慢（例如，頁面滾動速度慢，等等。）在某些計算機瀏覽器（低CPU的計算機）

Answer 1

我想主要原因是因爲圖像太大（幾乎是1.5兆字節），所以想象一下，爲了將背景從一側移動到另一側，CPU需要計算多少。我認爲你的精靈有很多不屬於它的資源（比如一些圖像（女孩，小心警告等）），你也在同一個精靈中混合了很多顏色，這使得圖像更大，因爲更多色彩渲染。

我認爲一個選項是掰開精靈成單獨的一個，這將使文件更小(the slow processors can handle, render and move better small images)，除去像（女孩，慎用警報等）的圖像，使它們的JPG文件，這將使文件還小。

精靈的想法是減少向服務器發出請求，但如果這種減少你應用程序的性能是讓一對夫婦的要求，並具有爲最終用戶提供更好的性能最好的主意。

Answer 2

也許你應該嘗試使用PNG Gauntlet來優化圖像。

另一個解決方案可能是將Sprite分成兩個甚至更多。