我在某些站点上注意到的一件事是,它们使用一个包含大量小图像的BIIIIIIIG图像,然后使用CSS background- position定义每个图像的坐标,而不是使用单个图像。
background- position
我在这里:
<div>
display: inline-block; width: 32px; height: 32px; background-image: url('spritesheet.png');
实际上,这里最接近专业人士的是,当我将工作表切成单个图像时,结果文件夹 在磁盘上 占用了3Mb (由于每个文件小于100字节,而我的分配大小为4k)。实际文件本身的大小不到工作表和CSS的一半,因此, 即使HTTP请求的开销很大,也可以节省大量空间 。
基本上,我的问题是:有人在使用大张纸而不是单个图像上有任何优点吗?
目的是减少HTTP请求。另外,有时压缩后的精灵的重量会小于原始图像。
最近,我有一个网站,网站上有很多透明的渐变色(从白色到透明,从灰色到透明),在透明图像上有一些黑白。通过将它们全部放置在一个精灵中并将png中的颜色减少到8,我可以使精灵在文件大小上小于原始图像(只是…节省了约0.5%)。通过将HTTP请求的数量从10个减少到1个,虽然意味着站点加载速度更快(如果测量从第一次连接到传输的所有数据的时间)。
在这种情况下,发现可测量的增加。
我同意,尽管有可能使事情搞砸,最终产生比所需大的精灵,特别是如果您不使用PNG压缩。
请注意,在发布此文档后的两年内–如果您使用的是SSL,则应研究SPDY(我再过两年的笔记将提到HTTP 2.0而不是SPDY!)。 SPDY消除了拼写的好处。