在CSS中的图片精灵

Question

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

Answer 1

这可能取决于这些jpeg的大小。通常将图像组合在一起以减少http调用回服务器。如果它们的尺寸很小，那么将它们组合起来，如果没有，那么将它们分开并调用你需要的那些。

Answer 2

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

Answer 3

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

1. 压缩程度可能会受到影响; JPEG被调整为减小单个图像的大小，并且在突然过渡时表现不佳（如在拼贴中，您的元图像基本上就是这样）

2. 出于同样的原因，精灵图像的边缘可能不像现在那么尖锐，因为它们与相邻的图像数据一起被压缩（并且稍微组合）。