关于 CSS spritesheet 的问题（以及一些关于缓存的问题）

Question

1) 首先，我应该以某种方式对我的 spritesheet 中的图像进行排序吗？（比如从最大到最小的图像，或者从页面顶部到页面底部出现的图像？）

2) 假设我有一个包含前后图像的 css spritesheet。就像图像显示一头牛一样，但是当图像悬停时，它显示的是一头带翅膀的牛。那么不使用css spritesheet是否符合我的最大利益？ css 会一次加载我的 spritesheet 中的所有图片吗？

3) spritesheet 在缓存方面是否更好？不相关，但是浏览器缓存某些内容需要什么？我的意思是，如果它只是在单页浏览之后，也许不值得。

4) 最后，我想创建一个论坛。我对论坛一无所知，但我计划很快开始。我正在考虑拥有一组默认的 40 张图像，人们只能从中选择作为他们的头像。我是否应该为这些图像制作一个精灵表（如果可能的话）？

我知道这是很多问题，所以请回答您所知道的任何问题。谢谢！

Answer 1

1) 不确定，但我认为这并不重要，如果有的话。

2) 最好的方法是使用 CSS 图像翻转。

3) Spritesheets 更适合缓存，因为它只是一个图像，而不是 Web 服务器必须连接、发送图像、断开连接、再次发送、发送另一个图像、断开连接等......

4) 我只会使用单个图像。在这种情况下，真的没有理由使用 spritesheet。

Answer 2

“spritesheet”只是一张大图。所以...

1) 没关系。

2) 同样，它只是一张图片。如果不是所有用户都想要激活“之后”功能，那么你可以为他们节省一些带宽，让他们成为一个单独的精灵。如果大多数人都想使用 after 功能，那么您可以通过将其全部设为一个 sprite 来节省他们的带宽。 （但请注意，如果我们谈论的是非常大的图像，那么您想要在一个精灵中粘贴多少会有实际限制。例如，没有人会等待下载 1mb 文件）。

3) 同样，精灵只是一个图像。它与任何图像具有相同的缓存优点/缺点。

4) 与 1 个精灵相比，服务器上的 40 次点击是很多的。因此，仅基于此，精灵将是有用的。但是，如果您很少会在一页上获得超过 10 个左右的这些头像，那么精灵将是不利的，因为它正在加载如此大的文件。

Answer 3

就图像的排序而言，我有一个我正在开发的网站的 sprite 文件，其中包含各种浏览器徽标，并添加了版本号。因此，文件中的视觉信息有很多重复。

我很惊讶地发现，当保存为 PNG 时，重复的方向可能对我可以为图像实现的文件大小产生很大影响。当我在列中有类似的徽标时，文件大约 120 KB；而当我将它们排列成行时，它的大小为 41 KB。

项目上线后，我将发布实际图片。在 sprite 文件中重复出现如此相似的图像可能非常罕见；通常您的图像会有所不同，或者您只是重复使用相同的图像。 （实际上，我最终可能会重构我的精灵，以便不同的位在它们自己的文件中。）但我没有意识到，这些所谓的相似图像可以编码在两个大小不同的文件中，纯粹基于几何排列图像文件中的元素。