css - 图像 Sprite 背后的想法是什么，如何处理它？

Question

您如何在 CSS 中使用图像 Sprite ？

我是否应该将我网站中的所有图片组合成一个图片 Sprite ？真的有那么好用吗？

维护这些图像并在以后更改它们有多难？

Answer 1

Should I take all the images in my website and combine them to one image sprite?

当然不是。你太直白了。

我发现 sprite 最适合用于相似图像组。示例包括:

1. 图形按钮的所有状态
2. 图标状态
3. 背景的所有排列(除非它需要以两种方式平铺)

Is it really that beneficial?

如果您在一个繁忙的网站上有很多这样的人，非常。它为每个图像保存一个请求，从而节省用户时间和您的服务器一大堆并发连接。

How hard is it to maintain those images and change them later on?

如果您已经合理地使用了它们，那么非常简单。如果你需要添加另一个导航项，你打开你的导航 Sprite 并展开它。对于导航之类的东西，它实际上可以更容易维护，因为您在同一文档中的旁边就有类似的比较。

编辑，看过one of the more extreme examples ，我要补充一点，我永远不会走那那么远，因为:

• 下载需要 60k。不是很大，但在慢速连接上，这是 60k，必须在任何显示之前下载。如果你所有的视觉 Assets 都被捆绑起来，它会使加载时间看起来更长。

• 您的 CSS 变成了 background-position 命令的无意义大杂烩。如果您确实想进行更改，则必须返回 Sprite 并测量所有内容。一次又一次。

• 如果你需要放大 Sprite 左上角的东西，愿上帝保佑你。您可能只是在当前 Sprite 下方添加一个新 Sprite 。

• 这可能会导致腹胀。事实上，仅仅加载所有这些图像可能会加载一些用户永远不会真正看到的大量 Material 。加载未使用的数据可能比连接开销更糟糕(考虑到多个廉价服务器或 CDN 可以轻松提供静态内容)

其他示例要简单得多，也更有值(value)(IMO)。