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

Ben*_*rey 15 css memory image css-sprites sprite

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

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

在我眼里:

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

但是,在我的同事眼中:

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

这让我提出这个问题,精灵实际上是值得使用还是我的同事咆哮着错误的树?

Guf*_*ffa 15

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

如果是这样,像这个演示小提琴的页面将使用大约7 GB的内存.它没有.


加载一个图像总是比加载几个图像更快.在优化站点性能时,减少请求数量非常重要.互联网被设计为仅传输小包装的事实使得加载几个小图像的影响小于它本来可以.

  • @DavidBarker - 什么是Firefox?:P (2认同)