为什么要使用精灵表而不是单个图像？

Question

我在某些站点上注意到的一件事是，它们使用一个包含大量小图像的BIIIIIIIG图像，然后使用CSS background- position定义每个图像的坐标，而不是使用单个图像。

我在这里：

使用大精灵表的缺点

• 需要加载一张大图像以仅显示一个小图像
• 需要为每个图像编写（或生成）带有类的长样式表
• CSS杂乱无章，可能会影响性能
• 如果更改了一个图像（或添加了另一个图像），则图像和与之关联的CSS都可能会遇到缓存问题
• 需要一个<div>具有适当样式（display: inline-block; width: 32px; height: 32px; background-image: url('spritesheet.png');）的样式，该样式为混合添加了另一个类别。
• 我现在不记得要输入的更多内容了。

使用大精灵表的优点

• …呃…还没有。

实际上，这里最接近专业人士的是，当我将工作表切成单个图像时，结果文件夹 在磁盘上 占用了3Mb
（由于每个文件小于100字节，而我的分配大小为4k）。实际文件本身的大小不到工作表和CSS的一半，因此，
即使HTTP请求的开销很大，也可以节省大量空间
。

基本上，我的问题是：有人在使用大张纸而不是单个图像上有任何优点吗？

Answer 1

目的是减少HTTP请求。另外，有时压缩后的精灵的重量会小于原始图像。

最近，我有一个网站，网站上有很多透明的渐变色（从白色到透明，从灰色到透明），在透明图像上有一些黑白。通过将它们全部放置在一个精灵中并将png中的颜色减少到8，我可以使精灵在文件大小上小于原始图像（只是…节省了约0.5％）。通过将HTTP请求的数量从10个减少到1个，虽然意味着站点加载速度更快（如果测量从第一次连接到传输的所有数据的时间）。

在这种情况下，发现可测量的增加。

我同意，尽管有可能使事情搞砸，最终产生比所需大的精灵，特别是如果您不使用PNG压缩。

请注意，在发布此文档后的两年内–如果您使用的是SSL，则应研究SPDY（我再过两年的笔记将提到HTTP 2.0而不是SPDY！）。
SPDY消除了拼写的好处。