大约 2 年前，我开始使用图像精灵，因为我看到 Apple 和 Facebook 等网站在他们的网站上使用它们。
毫无疑问，如果您下载一个 60kb 的图像，而不是三个 20kb 的图像，加载页面会更快，但是，我最近被告知精灵，虽然加载速度更快，但实际上在客户端消耗更多内存.
在我眼里：
然而，在我的同事眼中：
这让我问一个问题，精灵真的值得使用还是我的同事在找错树？
在一个页面中多次使用图像并不意味着每个使用位置都有一个图像副本。
如果是这样，像这个演示小提琴这样的页面将使用大约 7 GB 的内存。它没有。
加载一张图片总是比加载多张图片要快。在优化站点性能时，减少请求数量很重要。互联网旨在传输小包的事实只会使加载几个小图像的影响比它本来的要小。
它们的值取决于使用上下文。对于我不再费心的设备，为了节省客户端处理开销。
它还可能取决于您使用的图像类型以及是否需要透明度以及什么样的透明度。我阅读了一篇关于移动网络电池寿命如何受到不同类型图像影响的论文（链接到后面！） - 与 JPG 相比，PNG 具有显着的渲染开销。
另一个考虑因素是图像在页面上的用途，以及它们在页面外的用途。我曾经为一个大型网站开发了一个模板，该模板只为页面上的所有精灵使用了一张图片，加载开销也很小。站点徽标非常适合精灵，这很好，直到人们开始在 Facebook 上共享站点并且我们将每个小图标、按钮状态等都显示为链接缩略图选项。
使用 sprite 会消耗更多内存。考虑您的精灵由 40 帧组成。即使一次只需要显示其中的几个，浏览器仍然需要解码整个精灵并将其保存在内存中。
话虽如此，这实际上取决于上下文。如果您将精灵用于始终可见的按钮图标，则内存使用与拥有多个图像没有什么不同。