在 HTTP/2 中使用图像精灵有意义吗？
Does using image sprites make sense in HTTP/2?
JS和CSS文件的捆绑，但是图像精灵呢？
看看 the demo，它似乎已经比 HTTP/1.1 快得多，但是将图像捆绑到 sprite 中不会使其更快吗？我的意思是，当所有数据都在一个文件中时，PNG 的优化算法不会更好地工作吗？
这取决于您的图片大小和格式。如果图像足够大，使用 sprite 不会有太大好处，但对于小图像，即使使用 HTTP/2 也会有显着的好处。使 HTTP/2 更好的是 headers 的开销要少得多，甚至 round-trips 的开销可能更少（前提是服务器实现了 PUSH）。问题是，您的文件应该多小才能考虑捆绑它们？
对于位图，您提出了一个很好的观点，即 PNG 的优化算法有利于精灵，特别是当它们的尺寸足够小时。例如，虽然 this article from Gabriel Bouvigne 中的图像是 17.4 kb，但对其进行切片会产生 132 个单独的图像，总计 135 kb。当您为传输添加少量但仍然存在的额外开销时，它接近十倍。是的，当服务器和客户端之间的带宽有限时，大小仍然很重要。
实际上，这也涉及 文本资源 ，例如 javascript、css 和 SVG 文件 。如果它们足够小并且不经常变化，您仍然可以考虑将它们捆绑在一起。例如，如果将 Angular 源代码的 ng folder 中的 Javascript 作为单独的压缩压缩 js 进行传输，则需要 69.6 kb。如果在 gzip 之前将它们连接起来，它只有 31.9 kb。然而，这里的因素略高于 2，如果 HTTP/2 节省连接时间和 round-trips 可能就不那么重要了。这进一步平衡了单独缓存资源的可能性。
最后一点，如果您的小 images/icons 是 SVG 矢量（它们应该！），那么它们算作文本资源。此外，SVG 向量往往更大一些，例如，Firefox's SVG icon 压缩后为 15.7 kb。在这个大小下，链接到它与内联或捆绑的决定是 no-brainer，如果 HTTP/2 好东西正在工作。
我会同意@dsign 的观点，这要视情况而定。
有一种趋势是将通常用作 sprite 的小图像类型内联到 CSS 本身作为数据 url。如果您将图像内联到 CSS，只需将它们作为单独的条目保存，这也具有针对每个图像进行优化的优势。对 sprite 中的一张图像的优化与其他图像不匹配...使用 PNG，您可以选择潜在的有损转换为图像 at/under 256 种颜色，具有 alpha 透明层，例如 TinyPNG and pngquant。有些图像可以低于 16 色。当您创建组合精灵时，这些类型的优化会受到更多限制。
我倾向于简单地使用 CSS 内联或将图像分开。积极的是，像 webpack（以及人们正在使用的其他工具）这样的工具使得这对于 Web 应用程序来说是一个相当微不足道的配置问题。
如果您能够通过 HTTP/2 实现图像的服务器端推送，那么将它们分开更有可能对您有利。
JS和CSS文件的捆绑
看看 the demo，它似乎已经比 HTTP/1.1 快得多，但是将图像捆绑到 sprite 中不会使其更快吗？我的意思是，当所有数据都在一个文件中时，PNG 的优化算法不会更好地工作吗？
这取决于您的图片大小和格式。如果图像足够大，使用 sprite 不会有太大好处，但对于小图像，即使使用 HTTP/2 也会有显着的好处。使 HTTP/2 更好的是 headers 的开销要少得多，甚至 round-trips 的开销可能更少（前提是服务器实现了 PUSH）。问题是，您的文件应该多小才能考虑捆绑它们？
对于位图，您提出了一个很好的观点，即 PNG 的优化算法有利于精灵，特别是当它们的尺寸足够小时。例如，虽然 this article from Gabriel Bouvigne 中的图像是 17.4 kb，但对其进行切片会产生 132 个单独的图像，总计 135 kb。当您为传输添加少量但仍然存在的额外开销时，它接近十倍。是的，当服务器和客户端之间的带宽有限时，大小仍然很重要。
实际上，这也涉及 文本资源 ，例如 javascript、css 和 SVG 文件 。如果它们足够小并且不经常变化，您仍然可以考虑将它们捆绑在一起。例如，如果将 Angular 源代码的 ng folder 中的 Javascript 作为单独的压缩压缩 js 进行传输，则需要 69.6 kb。如果在 gzip 之前将它们连接起来，它只有 31.9 kb。然而，这里的因素略高于 2，如果 HTTP/2 节省连接时间和 round-trips 可能就不那么重要了。这进一步平衡了单独缓存资源的可能性。
最后一点，如果您的小 images/icons 是 SVG 矢量（它们应该！），那么它们算作文本资源。此外，SVG 向量往往更大一些，例如，Firefox's SVG icon 压缩后为 15.7 kb。在这个大小下，链接到它与内联或捆绑的决定是 no-brainer，如果 HTTP/2 好东西正在工作。
我会同意@dsign 的观点，这要视情况而定。
有一种趋势是将通常用作 sprite 的小图像类型内联到 CSS 本身作为数据 url。如果您将图像内联到 CSS，只需将它们作为单独的条目保存，这也具有针对每个图像进行优化的优势。对 sprite 中的一张图像的优化与其他图像不匹配...使用 PNG，您可以选择潜在的有损转换为图像 at/under 256 种颜色，具有 alpha 透明层，例如 TinyPNG and pngquant。有些图像可以低于 16 色。当您创建组合精灵时，这些类型的优化会受到更多限制。
我倾向于简单地使用 CSS 内联或将图像分开。积极的是，像 webpack（以及人们正在使用的其他工具）这样的工具使得这对于 Web 应用程序来说是一个相当微不足道的配置问题。
如果您能够通过 HTTP/2 实现图像的服务器端推送，那么将它们分开更有可能对您有利。