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

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否定了spriting的好处.

Answer 2

你所说的内容并不是很多.

当你加载一个大图像时,它只包含一个图像所需的不同属性(颜色表,mime类型等等:想象一下,如果你使用渐进式jpg格式,一个spritesheet将允许图像扫描一次,而许多人将显着减少加载时间)而不是在100个不同的文件中具有相同的信息,它将减少大图中的文件大小.

此外,只有一个http请求(或两个,具体取决于你有多少个spritesheets.)但如果处理得当,每页加载只有一个.

如果您在CSS中使用bg图像,那么您已经制作了css选择器,因此没有额外的工作,只需复制/粘贴网址即可.

我从未遇到过使用ctrl + F5无法解决的spritesheets的任何缓存问题.

在任何情况下都不需要具有适当样式的div.这不是<img>标签替换方法,主要用于bg图像.喜欢按钮和图标集.

优点远远超过了这种方法的缺点,证明它已经被很多开发人员使用了.如果这是一种可怕的方法,没有人会捡到它,有人会在它首次投入使用时提出这些问题.

如果有人有更多要添加,不要害羞:)