图像精灵实际上比单独的图像更有效吗？答案

【问题标题】：Are image sprites actually more efficient than separate images?图像精灵实际上比单独的图像更有效吗？
【发布时间】：2012-08-16 13:04:09
【问题描述】：

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

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

在我看来：

但是，在我的同事眼中：

这让我问一个问题，精灵真的值得使用还是我的同事找错了树？

【问题讨论】：

“每次在页面上引用精灵时，都会在内存中创建图像，这反过来会降低客户端浏览器的速度”[需要引用]
每次写入background-image:url('imageaddress');，图像都会缓存在计算机内存中，因此会降低浏览器的速度。那有意义吗？ :-)
stackoverflow.com/questions/8050152/…
我刚刚尝试了一下，没找到最近看的一篇很棒的文章，实际测试了精灵理论，发现是的，精灵节省内存。如果我能再次找到它，我会回来发布这篇文章......
为什么浏览器需要在内存中多次存储同一张图片？这没有任何意义。

【解决方案1】：

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

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

加载一张图片总是比加载多张图片要快。在优化站点性能时，减少请求数量很重要。互联网旨在传输小包裹这一事实只会使加载几张小图片的影响比本来的要小。

【讨论】：

天哪，我喜欢让 Firefox 崩溃的小提琴 :)
@DavidBarker - 什么是 Firefox？ :P
@Dementic 一块崩溃的 *&^£ :P
@Guffa 当我离开它 5 分钟时它确实回来了，tbh 摆弄大量代码通常会挂起 Firefox（无论如何对我来说）。因为答案很好，所以没有戳你:)
@Ben Carey 这个链接w3schools.com/css/css_image_sprites.asp 它解释并给出了这样的声明“一个包含许多图像的网页可能需要很长时间才能加载并生成多个服务器请求。使用图像精灵将减少服务器请求并节省带宽。”但是，如果您仍然看到演示，他将图像调用了 2 倍，那么说它减少了多个请求和 bw 有什么意义。

【解决方案2】：

它们的价值取决于使用环境。对于我不再打扰的设备，以节省客户端处理开销。

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

另一个考虑因素是图像在页面上的用途，以及它们在页面外的用途。我曾经为一个大型网站开发了一个模板，它只为页面上的所有精灵使用一张图片，加载开销也很小。站点徽标非常适合 sprite，这很好，直到人们开始在 Facebook 上分享站点，我们将每个小图标、按钮状态等都显示为链接缩略图选项。

【讨论】：

【解决方案3】：

使用精灵会消耗更多内存。考虑您的精灵由 40 帧组成。即使一次只需要显示其中的一小部分，浏览器仍然需要解码整个精灵并将其保存在内存中。

话虽如此，这确实取决于上下文。如果您将精灵用于始终可见的按钮图标，则内存使用与拥有多个图像没有什么不同。

【讨论】：