一张大图像比多张小图片效率更高。 Facebook风格
所以我正在用萤火虫看facebook的facebook，我偶然发现这个图像，并得出结论，facebook使用这个大图像（与棘手的图像定位代码），而不是许多小的graphics元素。 这比存储许多小图像更高效吗？
谁能给出任何线索，为什么Facebook会这样做。
这些被称为CSS精灵，是的，他们更有效率 – 用户只需要下载一个文件，这减less了加载页面的HTTP请求的数量。 请参阅此页面了解更多信息。
背后的理论在这里解释： http ： //css-tricks.com/css-sprites/ ，也看看这里 ，因为它强调了为什么你真的需要一个大的形象。 我也说，所有的文章是有趣的:)
亲performance观点的问题在于它似乎总是呈现“为什么”（表演），往往没有“如何”，而从来没有“为什么不”。
CSS精灵确实对性能有积极的影响，因为其他海报详细介绍的原因。 但是， 它们确实有一个缺点：可维护性 ; 删除，更改和特别调整图像的大小变得更加困难 – 主要是因为需要对背景位置迷乱的样式表进行更改，以及每次更改精灵的大小或映射的形状。
我认为这是less数人的观点，但我坚信在绝大多数情况下，可维护性问题应该超过性能问题。 如果性能是必要的 ，那么继续，但要注意成本。
也就是说，性能的影响是巨大的 – 特别是当你使用翻转，并希望避免鼠标hover图像时得到的效果，然后浏览器消失以请求翻转。 一旦你的需求稳定下来，把你的图片重构成精灵地图是非常合适的，特别是当你的网站将会处于高stream量的情况下（当然也包括大量的例子 – Facebook，amazon，yahoo） ）。
有几种情况下，你可以使用它们，基本上没有成本。 任何时候你切片的图像，使用单一的图像和背景位置标签可能更便宜。 任何时候你都有一套标准的图标 – 特别是如果它们大小统一，不太可能改变的话。 另外，当然，任何时候performance真的很重要，而且你有预算来支付维护费用。
如果可能的话，使用一个工具并logging你的使用情况，以便维护你的精灵的人知道它。 http://csssprites.org/是我详细研究过的唯一工具，但http://spriteme.org/看起来非常棒。;
该技术被称为“CSS精灵”。
看到：
- 在Web应用程序中使用CSS Sprites有什么优势？
- css精灵的performance
- CSS sprites如何加速网站？
由于其他用户已经回答了这个问题，下面是如何做到这一点 ， 另一种方法是在这里。
打开连接比简单地继续转移更昂贵。 同样，浏览器只需要caching一个文件而不是数百个。
又一个资源： http : //www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
CSS sprites的主要好处之一是它几乎增加了0服务器开销，并且都是计算客户端。 没有服务器端性能的巨大收益。
简单的答案是，如果你使用了多个图像，那么你只需要“获取”一个图像文件，并且对于不同的视图是“剪切”的，如果你使用了多个图像，那么你需要下载多个文件，这只需要等额外的时间来下载。
将大图片分割成“精灵”会产生一个HTTP请求，并提供一个不闪烁的方法，以及对'onmouseover'元素（如果你重复使用同一个大图像的鼠标效果）。
Css Sprites tecnique是一种用于减less使用背景位置的图像请求数量的方法。 加快您的网站的最佳实践
CSS精灵：图片切片的死亡之吻
谷歌也做到了 – 我在这里写了一篇博文： http : //www.stevefenton.co.uk/Content/Blog/Date/200905/Blog/Google-Uses-Image-Sprites/
但其实质是你为一个大的图像发出一个http请求，而不是20个小的http请求。
如果你看一个http请求，他们会花更多的时间等待开始下载，而不是真正的下载，所以在一次打击的时候要快得多 – 笨重，而不是唠叨！
