大CSS精灵图像（在低CPU计算机中运行缓慢）

Question

我的网站有一个很大的css sprite图片。

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

Sprite Image：http://www.protohaber.com/demo/templates/v1/images/proto_sprite.png

我的网站在某些计算机（低CPU计算机）的浏览器上运行缓慢（例如页面滚动速度慢等等）

Answer 1

也许您应该尝试使用PNG Gauntlet来优化图片。

另一个解决方案可能是将Sprite分成两个甚至更多。

Answer 2

我认为造成这种情况的主要原因是因为图像太大（大约1.5兆字节），所以想象一下cpu必须计算多少以将背景从一侧移动到另一侧。我认为你的精灵有很多资源不属于它（就像一些图像（女孩，警告警告等）。你也在同一个精灵混合了很多颜色，这使得图像更大，因为有更多要渲染的颜色。

我认为一个选项是将精灵拆分成单独的一个，这将使文件变小(the slow processors can handle, render and move better small images)，删除像（女孩，警告警报等）的图像，并使它们成为jpg文件，这将使文件也更小。

精灵的想法是减少对服务器的请求，但如果这降低了你的应用程序的性能，最好再做几个请求并为最终用户提供更好的性能。