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

时间:2011-11-08 12:11:16

标签: html css image css-sprites

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

这是我在的地方:

使用大精灵表的缺点

  • 需要加载大图像才能显示一个小图像
  • 需要为每个图像编写(或生成)带有类的长样式表
  • 使用大量类定义来混乱CSS可能会影响性能
  • 如果一个图像发生变化(或另一个图像发生变化),图像和与之关联的CSS可能会遇到缓存问题
  • 要求<div>具有适当的样式(display: inline-block; width: 32px; height: 32px; background-image: url('spritesheet.png');),这样可以添加另一个类别。
  • 现在我记不起来了,还有很多我正在打字的。

使用大精灵表的优点

  • ...呃...还没有。

事实上,这里唯一接近专业人士的是,当我将表单剪切成单个图像时,生成的文件夹占用了磁盘上的3Mb (由于每个文件都<100字节和我的分配大小是4k)。实际文件本身的大小不到工作表和CSS的一半,所以 即使有HTTP请求的开销,也节省了大量空间

基本上,我的问题是:是否有人在单张图片上使用大页面时有任何优点?

8 个答案:

答案 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);}