使用精灵比单个图像有什么好处？

Question

我最近注意到这个网站上的每一个图像 - 徽标，徽章颜色，上/下投票箭头 - 列表都在进行 - 实际上是单个精灵表的一部分，设置为背景图像，并根据它重新定位必需的状态。使用此方法比使用多个图像有什么好处？

Answer 1

简单。您发送的HTTP请求较少。一个用于所有图像，而不是每个图像一个。

Answer 2

此外，可以更好地压缩包含所有图像的大型压缩精灵，从而使文件大小比自己的所有图像都小。例如。如果你有10个文件，每个文件大小为20kB，那么精灵通常远小于200kB。

Answer 3

使用精灵，浏览器只需要为整个图像发出一个HTTP请求，而不是N个N图像请求。创建TCP连接（三次握手）会产生大量开销和延迟，因此将此限制为仅一个请求可以节省大量时间。