图像精灵实际上比单独的图像效率更高吗？

Question

我在2年前开始使用图像精灵，因为我看到像Apple和Facebook这样的网站在他们的网站上使用它们。

毫无疑问，如果您下载一个60kb图像而不是三个20kb图像，那么加载页面的速度会更快，但是，我最近被告知精灵虽然加载时速度较快，但却在事实上，在客户端消耗更多的内存。

在我眼里：

1. Sprites加载速度更快，占用带宽更少
2. 从开发人员的角度来看，它们更易于维护，因为所有图形都在一个地方

然而，在我的同事眼中：

1. 每次在页面上引用精灵时，图像都会在内存中创建，从而减慢客户端浏览器的速度。
2. 加载速度的差异不足以证明浏览器的内存使用量增加是合理的
3. 互联网旨在以小数据包传输，因此加载较小的图像比加载较大的图像更好

这让我问这个问题，精灵实际上是值得使用还是我的同事咆哮错误的树？

Answer 1

在页面中多次使用图像并不意味着每个使用图像的地方都有一个图像副本。

如果是这样，像this demo fiddle这样的页面将使用大约7 GB的内存。它没有。

---

加载一张图片总是比加载多张图片更快。在优化站点性能时，减少请求数量非常重要。互联网设计用于传输小包装的事实只会使加载几个小图像的影响小于原来的效果。

Answer 2

它们的值取决于使用情况。对于我不再烦恼的设备，为了节省客户端处理开销。

它还可能取决于您使用的图像类型以及是否需要透明度以及何种透明度。我读了一篇关于移动网络电池寿命如何受到不同类型图像影响的论文（请关注！） - 与JPG相比，PNG具有显着的渲染开销。

另一个考虑因素是图像在页面上的用途，以及它们在页面外的用途。我曾经为一个大型网站开发了一个模板，它只为页面上的所有精灵使用了一个图像，加载开销也很小。网站徽标很好地适用于精灵，这很好，直到人们开始在Facebook上分享网站，我们有每个小图标，按钮状态等出现作为链接缩略图选择。

Answer 3

使用精灵消耗更多内存。考虑一下你的精灵包含40帧。即使一次只需要显示少数几个，浏览器仍然需要解码整个精灵并将其保存在内存中。

话虽如此，这实际上取决于背景。如果您使用sprite作为始终可见的按钮图标，则内存使用情况与拥有多个图像没有区别。