我在一些网站上注意到的一件事是,他们使用一个包含大量小图像的BIIIIIIIG图像,然后使用CSS background-position
来定义每个图像的坐标,而不是使用单个图像。
这是我在的地方:
<div>
具有适当的样式(display: inline-block; width: 32px; height: 32px; background-image: url('spritesheet.png');
),这样可以添加另一个类别。事实上,这里唯一接近专业人士的是,当我将表单剪切成单个图像时,生成的文件夹占用了磁盘上的3Mb (由于每个文件都<100字节和我的分配大小是4k)。实际文件本身的大小不到工作表和CSS的一半,所以 即使有HTTP请求的开销,也节省了大量空间 。
基本上,我的问题是:是否有人在单张图片上使用大页面时有任何优点?
答案 0 :(得分:19)
目的是减少HTTP请求。此外,有时压缩精灵的重量会比原始图像重。
最近我的网站有很多透明渐变(白色到透明,灰色到反式)和透明图像上的一些黑色和白色。通过将它们全部放入精灵中并将png中的颜色减少到8,我可以使文件大小的精灵比原始图像更小(只是......它节省了大约0.5%)。通过将HTTP请求的数量从10减少到1意味着网站加载速度更快(如果测量从第一次连接到所有传输数据的时间)。
在这种情况下,发现了可测量的增长。
我同意,虽然可能会搞砸并最终得到一个比所需更大的精灵,特别是如果你没有使用PNG压缩。
注意发布此信息两年后 - 如果您使用的是SSL,则应该查看SPDY(我的注释将在两年内提及HTTP 2.0而不是SPDY!)。 SPDY否定了spriting的好处。
答案 1 :(得分:9)
你所说的内容并不多,因为Cons确实是缺点。
当你加载一个大图像时,它只包含一个图像所需的不同属性(颜色表,mime类型等等):想象如果你使用渐进式jpg格式,一个spritesheet将允许图像扫描一次,而许多将显着减少加载时间)而不是在100个不同的文件中具有相同的信息,它将减少大图中的文件大小。
此外,只有一个http请求(或两个,具体取决于你有多少个spritesheets。)但如果处理得当,每页加载只有一个。
如果您在CSS中使用bg图像,那么已经制作了css选择器,因此没有额外的工作,只需复制/粘贴网址。
我从来没有遇到过使用ctrl + F5无法解决的spritesheets的任何缓存问题。
在任何情况下都不需要具有适当样式的div。
这不是<img>
标记替换方法,主要用于bg图像。喜欢按钮和图标集。
这方面的优点远远超过了这种方法的缺点,证明它已经被很多开发人员使用了。如果这是一种可怕的方法,没有人会捡到它,有人会在它首次投入使用时提出这些问题。
如果有人要添加更多内容,请不要害羞:)
答案 2 :(得分:4)
Google将其描述为here。基本上它应该减少页面加载时间。每次新连接初始化都会增加一些延迟在某些情况下,它还可以减少数据传输大小,从而也减少页面加载时间。它适用于很少或全部(主题)变化的图像。然后浏览器可以使用缓存的图像,并且只需要检查一个文件的变化,而不是逐个检查每个图像。
答案 3 :(得分:3)
雪碧表是一团糟。期。不需要糖衣。他们在设计技术上向后迈出了巨大的一步,这可能解释了为什么喜欢使用精灵表的人才是老派游戏开发者。 Sprite表只有一个兑换质量,加载速度要快一些。除此之外,它们是垃圾。更不用说设置的噩梦了。
在什么样的世界中,为了运行简单的步行周期,必须包含500行代码才是“可接受的”。希望一些聪明的家伙能想出一个简单的解决方案,就像拖动一个自包含的,支持alpha的视频格式,如flv,但这也可以在平板电脑上运行......
如果你想写一篇关于精灵有多精彩的大量清单,我只能想知道你的设计工作有多无聊。最重要的是,如果一个“工具”让你更难做一些应该很容易的事情,那么它就不是一个好工具。扔掉它。
答案 4 :(得分:1)
是 - 请求数量。
大多数浏览器每个域只会并行下载大约2个资源,因此如果您提供大量小图像,则用户必须等待大约一半的HTTP请求 - 响应周期。如果您使用精灵,那只是一个请求和一个响应(尽管响应更大)。
答案 5 :(得分:1)
如果您有许多图像,浏览器将需要下载每个图像。由于浏览器只能同时下载有限数量的文件,因此需要时间。单个图像只会绑定一个下载插槽,从而使页面渲染速度更快。
此外,如果在许多其他页面中使用,则已经缓存了大型精灵表。
答案 6 :(得分:1)
这对于许多小图片特别有用,因为浏览器只需要对所有图像执行http请求,而不是数百个。因此,您在客户端浏览器上加载Web的速度要快得多。
事情是加载速度。只有一个http请求比几十个要快得多。答案 7 :(得分:1)
此外,它有助于保持CSS清洁。例如,我使用sprite作为按钮(这也意味着没有额外的延迟来加载悬停状态img)
<button type="submit" class="vorige"><span>Vorige</span></button>
button {display: block; width: 162px; height: 47px; background-position: 0 0;}
button:hover {background-position: 0 94px; cursor: pointer;}
button:active {background-position: 0 47px;}
button span {display: none}
.vorige {background-image: url(../img/button/btn_vorige.png);}
.volgende {background-image: url(../img/button/btn_volgende.png);}
.verstuur {background-image: url(../img/button/btn_verstuur.png);}
因为精灵我可以省去单独的悬停图像的代码:
.vorige:hover {background-image: url(../img/button/btn_vorige_active.png);}
.volgende:hover {background-image: url(../img/button/btn_volgende_active.png);}
.verstuur:hover {background-image: url(../img/button/btn_verstuur_active.png);}