image - 与单个图像相比，使用精灵有什么优势？

Question

我最近注意到这个网站上的每张图片——标志、徽章颜色、向上/向下投票箭头——不胜枚举——实际上是单个精灵表的一部分，设置为背景图像，并根据所需的状态重新定位。与使用多个图像相比，使用此方法有什么优势？

Answer 1

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

Answer 2

此外，可以更好地压缩包含所有图像的大型压缩精灵，从而导致文件大小比所有图像本身更小。例如，如果您有 10 个文件，每个文件大小为 20kB，则 sprite 通常会远小于 200kB。

Answer 3

对于 sprite，浏览器只需对整个图像发出一个 HTTP 请求，而不是对 N 个图像发出 N 次请求。创建 TCP 连接（三次握手）有很大的开销和延迟，因此将其限制为仅一个请求可以节省大量时间。