一张大图像比多张小图片效率更高。 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请求,他们会花更多的时间等待开始下载,而不是真正的下载,所以在一次打击的时候要快得多 – 笨重,而不是唠叨!