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

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

毫无疑问，如果下载一个60kb的图像而不是三个20kb的图像，加载一个页面会更快，但是，我最近被告知，尽管sprite加载速度更快，但实际上客户端占用的内存要多得多

在我看来：

精灵加载速度更快，使用的带宽更少

从开发人员的角度来看，它们更易于维护，因为您的所有图形都位于一个位置

然而，在我的同事眼中：

---

每次在页面上引用精灵时，都会在内存中创建图像，这反过来会降低客户端浏览器的速度

加载速度的差异不足以证明浏览器内存使用量的增加

互联网被设计成以小数据包的形式传输，因此加载较小的图像比加载较大的图像更好

---

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

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

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

---

---

加载一个图像总是比加载多个图像快。在优化站点性能时，减少请求数量非常重要。事实上，互联网是专为传输小包裹而设计的，这只会使加载多个小图片的影响小于它本来可能产生的影响。

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

它还可能取决于您使用的图像类型、是否需要透明度以及透明度的类型。我读了一篇文章（linketfollow！），内容是关于不同类型的图像如何影响移动网络的电池寿命——PNG的渲染开销比JPG要大得多

---

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

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

---

话虽如此，这实际上取决于上下文。如果您将精灵用于始终可见的按钮图标，则内存使用与具有多个图像没有区别

“每次在页面上引用精灵时，都会在内存中创建图像，这反过来会降低客户端浏览器的速度”[需要引用]每次写入

背景图像：url（“imageaddress”），图像缓存在计算机内存中，因此会降低浏览器速度。这有意义吗？：-）我刚刚试过，但没能找到我最近读到的一篇很棒的文章，这篇文章实际上测试了精灵理论，发现是的，精灵可以节省内存。如果我能再次找到这篇文章，我会回来发帖……为什么浏览器需要在内存中多次存储同一个图像？这没有任何意义。天哪，我喜欢使Firefox崩溃的小提琴：）@DavidBarker-什么是Firefox？：P@Dementic一块破碎的碎片*&^：P@Guffa当我离开它5分钟后，它确实回来了，tbh摆弄了很多代码通常会挂起Firefox（无论如何对我来说）。答案很好，这不是在戳你：）@Ben Carey这个链接解释并给出了这样一句话：“一个包含许多图像的网页可能需要很长时间才能加载并生成多个服务器请求。使用图像精灵将减少服务器请求的数量并节省带宽。”但是如果你仍然看到演示，他调用图像的次数是原来的2倍，这意味着它减少了多次请求和bw。