我在一些网站上注意到的一件事是，他们使用一个包含大量小图像的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);}