我注意到现在有很多网站将所有图片放在单个文件中然后使用背景位置来偏移屏幕上显示的矩形。
这是出于性能原因吗？如果是这样的话？
答案 0 :(得分：10)
这称为CSS精灵。它的使用有几个原因：
对服务器的请求较少。
文件尺寸略小，因为较大的图像比单独的图像小一些。
预加载图像，以便例如用于悬停效果的图像已加载，因为它使用与非悬停状态相同的图像。
缺点当然是管理和更新图像的工作量更大。
答案 1 :(得分：4)
对一张大图像进行压缩通常比在多张相似图像上压缩更有效。
更重要的是，HTTP请求相对昂贵。
答案 2 :(得分：3)
这是出于性能原因吗？如果是这样的话？
单个请求意味着与服务器的并发连接更少，这意味着可以加载其他内容。 TCP连接也会占用服务器上的资源。每个用户的总连接数越少意味着更多用户可以同时使用它（如果您的性能确实是连接限制的话）。
单个精灵通常比一堆单个图像的文件大小稍微小一些，但这并不能保证，不同的格式会有所不同。
对象状态全部被加载，意味着交互比您按需加载另一个状态更直接。
即使当前页面上没有使用精灵的一部分，通过加载它（以及浏览器缓存它），这将在以后用户查看其他页面时加快用户的浏览体验
Sprites并不能解决所有问题，你可能不应该对它进行太过分析，直到你预测到流量过大和/或你正在转向CDN，你会按照要求收取费用。
当然，如果你有一整套16x16图标可以在一个地方使用，你可以很快地编写它们。我发现有几个sprite用于特定的事情，实际上使CSS也更清洁。
答案 3 :(得分：0)
@david还没有提到的另一件事是，它需要花费大量的服务器时间来加载几个小图像，而是一次性加载一个大图像（请求）并将其作为您的选择进行操作
答案 4 :(得分：0)
您可以查看雅虎的“加速网站的最佳实践”： http://developer.yahoo.com/performance/rules.html#opt_sprites