css - 大 CSS Sprite 图像（在低 cpu 计算机中运行缓慢）

Question

我的网站有一个很大的 CSS 精灵图像。

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

雪碧图片： 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 文件，这将使文件也更小。

sprites 的想法是减少对服务器的请求，但如果这会降低您的应用程序的性能，最好发出更多请求并为最终用户提供更好的性能。