css - css中的图片精灵

Question

我已经阅读了很多关于在 css 中为图标和徽标使用精灵的好处，但这似乎主要用于无损格式，例如 gif 和 png。我想知道 jpeg 和图像的好处是否仍然存在？我想从许多可能以不同顺序显示的较小图片构建标题。将它们组合成一个 jpg 是否仍然具有精灵的正常用例的速度优势？

Answer 1

将 sprite 用于多个图像的主要好处是它提供了较少量的要发送的标头信息。因此，在 sprite 内部拥有较大的图片对整个项目的整体影响较小，会有小幅增加，但使用 sprite 会降低系统的适应性。如果图片要随时更改，我会将其保留在精灵之外。

Answer 2

这可能取决于这些 jpeg 有多大。通常将图像组合在一起以减少对服务器的 http 调用。如果它们的尺寸很小，则将它们组合起来，如果不是，则将它们分开并调用您需要的任何一个。

Answer 3

您可以在减少往返等方面获得相同的好处，但是：

1. 压缩水平可能会受到影响；JPEG 被调整以减小单个图像的大小，并且在突然过渡时效果不佳（例如在拼贴画中，您的元图像基本上就是这样）

2. 出于同样的原因，您的 sprite 图像的边缘可能会比现在不那么清晰，因为它们与相邻的图像数据一起被有损压缩（并因此轻微组合）。