在 HTTP/2 中使用图像精灵有意义吗？

Posted 2023-03-10

【中文标题】在 HTTP/2 中使用图像精灵有意义吗？

【英文标题】：Does using image sprites make sense in HTTP/2?

【发布时间】：2015-11-16 14:33:57

【问题描述】：

JS和CSS文件的捆绑won't be necessary in HTTP/2，但是图片精灵呢？

看看the demo，它似乎已经比 HTTP/1.1 运行得更快了，但是将图像捆绑到 sprite 中不会让它更快吗？我的意思是，当所有数据都在一个文件中时，PNG 的优化算法不会更好地工作吗？

【参考方案1】：

这取决于您的图片尺寸和格式。如果图像足够大，使用 sprite 不会获得太多收益，但对于小图像，即使使用 HTTP/2 也会有显着的收益。使 HTTP/2 更好的是，标头的开销要少得多，而且往返可能更少（假设服务器实现了 PUSH）。问题是，您的文件应该多小才能考虑捆绑它们？

对于位图，您提出了一个很好的观点，即 PNG 的优化算法有利于精灵，特别是如果它们的尺寸足够小。例如，this article from Gabriel Bouvigne 中的图像是 17.4 kb，切片它会产生 132 个单独的图像，总计 135 kb。当您添加少量但仍然存在的额外传输开销时，它接近十倍。是的，当服务器和客户端之间的带宽有限时，大小仍然很重要。

实际上，这也适用于 文本资源，例如 javascript、css 和 SVG 文件。如果它们足够小并且不经常更改，您仍然可以考虑将它们捆绑在一起。例如，Angular 源代码的ng folder 中的 Javascript 如果作为单独的、缩小的和 gzip 压缩的 js 传输，则需要 69.6 kb。如果在 gzip 压缩之前将它们连接起来，则只有 31.9 kb。然而，这里的因素只是略高于两个，如果 HTTP/2 节省了连接时间和往返行程，它可能就不那么重要了。这进一步平衡了单独缓存资源的可能性。

最后一点，如果您的小图像/图标是 SVG 矢量（它们应该！），那么它们就被视为文本资源。此外，SVG 矢量往往会更大一些，例如，Firefox's SVG icon 压缩后为 15.7 kb。在这种规模下，如果 HTTP/2 的好东西正在运行，那么链接到它还是内联或捆绑的决定是不费吹灰之力的。

【讨论】：

我觉得值得补充的一点是，虽然您在考虑总尺寸时可能是对的，但 不 使用 spritesheets 确实允许客户端仅获取特定页面中实际使用的图像。捆绑意味着您要发送所有内容，无论是否使用。

【参考方案2】：

我同意@dsign 的观点，这取决于。

有一种趋势是将通常在 CSS 本身中用作 sprite 的小图像类型作为 data-url 内联。如果您将图像内联到 CSS 中，只需将它们作为单独的条目保存，这还具有每个图像优化的优势。 sprite 中的一个图像的优化与其他图像不匹配......使用 PNG，您可以选择使用 alpha 透明层（例如 TinyPNG 和 pngquant）将潜在有损转换为 256 色/以下的图像。有些图像可以低于 16 色。当您创建组合精灵时，这些类型的优化会受到更多限制。

我倾向于简单地使用 CSS 内联或将图像分开。积极的一面是，像 webpack（以及人们正在使用的其他工具）这样的工具使得这对于 Web 应用程序来说是一个相当微不足道的配置问题。

如果您能够通过 HTTP/2 实现图像的服务器端推送，那么将它们分开更有可能对您有利。