使用图像精灵在HTTP / 2中有意义吗？ [英] Does using image sprites make sense in HTTP/2?

问题描述

捆绑JS和CSS文件在HTTP / 2 中不是必需的，但是图像精灵呢？

The bundling of JS and CSS files won't be necessary in HTTP/2, but what about image sprites?

查看演示它似乎已经比HTTP / 1.1更快地运行，但是不会将图像捆绑到精灵中使它更快？我的意思是，当所有数据都在一个文件中时，PNG的优化算法不会更好吗？

Looking at the demo it seems that it already works way faster than HTTP/1.1, but won't bundling images into sprites make it even faster? I mean, won't the PNG's optimization algorithms work better when all the data is in a single file?

推荐答案

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

It depends of your image(s) sizes and format. If the images are big enough, you won't gain much by using sprites, but for small images there are significant gains, even when using HTTP/2. What makes HTTP/2 better is that there is much less overhead for headers and potentially even less round-trips (provided the server implements PUSH). The question is, how small should your files be to consider bundling them?

对于位图，你在PNG的优化算法中做了一个很好的观点有利于精灵，特别是如果他们的大小足够小。例如，中的图像来自Gabriel Bouvigne的这篇文章是17.4 kb，切片产生132个单独的图像，总计135 kb。当您为传输添加一小部分但仍然存在的额外开销时，它接近十倍。是的，当服务器和客户端之间的带宽有限时，大小仍然很重要。

For bitmaps, you make a good point in that PNG's optimization algorithm works in favor of sprites, specially if their size is small enough. For example, while the image in this article from Gabriel Bouvigne is 17.4 kb, slicing it produces 132 separate images totaling 135 kb. When you add a small but nonetheless existing additional overhead for transfer, it's close to a factor of ten. And yes, size still matters when the bandwidth between the server and client is limited.

实际上，这也达到了文本资源，就像javascript一样css和 SVG文件。如果它们足够小并且不经常更换，您仍可以考虑将它们捆绑在一起。例如，Angular源代码的 ng文件夹中的Javascript如果作为单独的，缩小的和gzipped js转移，则为69.6 kb。如果你在gzipping之前连接它们，它只有31.9 kb。然而，这里的因素略高于2，如果HTTP / 2节省了连接时间和往返次数，则可能没有那么重要。这进一步平衡了单独缓存资源的可能性。

Actually, this also reaches text resources, like javascript, css, and SVG files. If they are small enough and they don't change frequently, you may still consider bundling them together. For example, the Javascript in the ng folder of Angular's source takes 69.6 kb if transferred as separate, minified and gzipped js. If you concatenate them before gzipping, it is just 31.9 kb. The factor here however is just slightly above two, and it may not be as significant if HTTP/2 saves connection time and round-trips. That further balances with the possibility of caching resources separately.

作为最后一点，如果您的小图像/图标是SVG向量（它们应该！），那么它们将被视为文本资源。此外，SVG向量往往更大一些，例如， Firefox的SVG图标是15.7 kz时gzipped。如果HTTP / 2好东西正在工作，那么链接到内联或捆绑的决定是明智的。

As a final note, if your small images/icons are SVG vectors (and they should!), then they count as text resources. Also, SVG vectors tend to be a bit bigger, for example, Firefox's SVG icon is 15.7 kb when gzipped. At this size, the decision of linking to it vs inlining or bundling is a no-brainer, if the HTTP/2 goodies are working.

这篇关于使用图像精灵在HTTP / 2中有意义吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！