图像精灵背后的想法是什么,如何接近它?

我应该采取我的网站上的所有图片,并结合到一个图像精灵?

当然不是。你太直截了当了。

我发现精灵最适合用于类似的图像组。示例包括:

1. 图形按钮的所有状态
2. 图标状态
3. 背景的所有排列(除非需要双向平铺)

真的那么有好处吗?

如果你有一个繁忙的网站上,他们很多,非常。它为每个映像保存了一个请求,为用户和服务器节省了大量的并发连接时间。

如果你有逻辑的话,很简单。如果需要添加另一个导航项,请打开导航精灵并展开它。对于导航之类的东西,它实际上更容易维护,因为在同一个文档中,您的旁边有like比较。

编辑,看过 one of the more extreme examples 因为:

• 下载需要60k。不是很大,但在慢速连接,这是60k必须下载之前,任何东西显示。如果你所有的视觉资源都被占用了,它会使加载时间看起来更长。

• 你的CSS变成了一堆毫无意义的垃圾 background-position

• 这可能会导致腹胀。事实上,仅仅加载所有这些图像可能会加载大量一些用户根本看不到的内容。正在加载未使用的数据 可能

其他的例子要简单得多,也很有价值(IMO)。

您还需要评估您的站点,并确定您是否能够成功地实现它们。如果您不打算一开始就使用它们,那么可能需要大量的回溯和更新来为它们做准备。

1. Amazon Sprite
2. Ebay Sprite
3. Current.com Sprite (哇哦)
4. Google

如果您有一个至少具有一个固定维度(宽度或高度)的元素,并且希望它在不同的环境中具有不同的背景图像,那么sprite工作得很好。

当我尝试它时,我发现sprite图像文件往往小于它们所用的单个图像文件的总大小,因此您可以获得带宽节约以及其他两个好处:

1. 更少的HTTP请求

但这取决于图片的内容。

To Sprite Or Not To Sprite ,真正的大精灵图像可以使用相当多的浏览器内存(这是否真的是坏事取决于上下文。)

这样做是为了避免不必要的HTTP请求。如果你有很多小图标(比如说,像这个网站上使用的所见即所得编辑器),这尤其是一个问题。如果你有20个16x16像素的图标,那就不会有太多的带宽,但这仍然意味着每次加载页面时都会有20个额外的请求。

精灵的其他候选对象是按钮状态和任何纯粹是装饰但只是布局一部分的东西。

请注意,如果您有一个相对的 低的 交通网站(几乎每个人都有,除非你是谷歌或亚马逊)。尽管如此,sprite仍然可以提高移动设备的性能,因为它意味着更少的出错机会,从而降低延迟。