CSS重复背景、雪碧图或1像素PNG

Question

我希望了解与CSS背景图像和http请求相关的性能最佳实践。

1. 使用多个不同的1px PNG背景图像，因此会产生多个单独的http请求

或者

2. 使用一个大的图像精灵，其中包含用作背景图像的大渐变块。这样做会增加文件大小，但可以减少http请求。

期待听到您的意见...

- wilsonpage

---

你可能想测试浏览器在1像素图像和10像素图像上的渲染性能。一些浏览器在渲染100个1像素背景图像时肯定比渲染10个10像素背景图像慢（滚动等方面更加迟缓）。但我最近没有尝试过，所以这可能已经成为过去式了。 - Matt Gibson

这取决于你的背景图片长什么样子。 - Pekka

Answer 1

我认为对于小图片（比如1像素背景），使用data:uri技术会更好。

background: url(data:image/png;base64,....) top left repeat-x;

它适用于所有现代浏览器。对于旧版IE浏览器（如IE6，IE7），您可以通过条件注释来覆盖样式。

background: url("path/to/background.png") top left repeat-x;

当然，如果背景发生了变化，您需要重新编码它。但这样做可以节省很多请求。

- Vladimir

Answer 2

如果你想要使用这些图片来制作渐变效果，我建议使用CSS渐变，这样你就不需要任何图片。

当然，CSS渐变的明显问题是它不支持旧版本的IE。好消息是有一个名为CSS3Pie的IE修复程序，它允许它支持标准的CSS渐变功能（以及其他几个有用的CSS功能）。

不再需要任何图片; 只需一个HTC文件（仅由IE下载）。

- Spudley

Answer 3

保存HTTP请求总是更好的解决方案。但是您应该注意文件大小，以便它不会变得太大。然后，您应该考虑制作两个或更多图像。

请看下面的工具，它允许从未合并的图像轻松创建雪碧图像： http://spriteme.org/

- Fender

---

另外，根据你的背景重复值，你可以将图像合并成精灵（但我相信你在之前已经知道了这一点;-)）。 - Fender

一个图像精灵有多大才算太大？ - wilsonpage

我不认为这太大了。但这取决于许多不同的因素。想象一下使用64kbit/s下载大型背景精灵，直到整个图像加载完成之前，您将无法看到背景，因此在这种情况下最好看到进度，例如出现背景图像 :) - Fender

我建议你尝试使用SpriteMe（链接在答案中），它可以为你创建图像并显示使用精灵的节省量。它还考虑到了精灵的问题，如果不必要就不会创建精灵。 - Fender