我想知道是否有人用背景图片做过任何测试。我们通常会创建一个至少在一个方向（x或y或两者）重复的背景。
示例
假设我们有一个在X方向重复的渐变背景。梯度高度为400px。我们有几种可能性。我们可以创建尽可能小的图像（1像素宽和400像素高）或者我们可以创建400像素高的更大图像。
观察
由于梯度高达400像素，我们可能不会选择GIF格式，因为它只能存储256种自适应颜色。如果我们的渐变是微妙的，也许这是非常的，因为它没有那么多，但是否则我们可能宁愿将图像存储为24位PNG图像以保留完整的渐变细节。
困境
我们应该创建一个1×400像素大小的图像，水平重复 n 次，或者我们应该创建一个100×400像素大小的图像来加速浏览器中的渲染并拥有更大的图像文件大小
因此。 图像大小与渲染速度有关？哪一个胜出？有人关心测试吗？关于浏览器渲染速度和可能的小图像重绘闪烁...
答案 0 :(得分：12)
渲染速度是这里的瓶颈，因为更大的磁贴可以放入浏览器的缓存中。
我实际上已经为主流浏览器尝试了这一点，并且至少其中一些在非常小的磁贴上显得很慢。
因此，如果增加位图大小不会导致荒谬大文件大小，我肯定会这样做。自己测试看看。 （请记住包括IE6，因为仍然有很多人坚持使用它）。
您可以在位图大小和文件大小之间取得良好的平衡，但一般情况下我会尝试50x400,100x400,200x400甚至400x400像素。
答案 1 :(得分：4)
我发现如果你有一个宽度为1px的背景图像并重复它，那么浏览器的渲染性能可能会有很大差异。最好有一个尺寸略大的背景图像。因此，宽度为100px的图像在浏览器中表现更好。当您在网站上的可拖动图层中使用重复的背景图像时，这尤其起作用。对于经常重复的背景图像，拖动性能非常糟糕。
答案 2 :(得分：4)
我想指出的是，发送额外几行的成本（这里只有1-2个例子）.8k - 1.6kb（如果你可以逃脱8位）更像2.4kb - 4.0kb for 24bit
2像素列更多意味着blit背景所需的迭代次数减少到1/3，最高可达1.6kb（8位）或4kb（24位）
即使是一个额外的列，也需要将blitting减半，直到元素宽度的一半。
如果56.6k调制解调器的背景在不到一秒的时间内完成，我估计它足够精简。
答案 3 :(得分：1)
如果图像的小尺寸对渲染产生负面影响，我确定任何体面的浏览器都会在平铺之前在内部对图像进行几次blit。
也就是说，我倾向于不使用1像素图像尺寸，所以我可以清楚地看到图像，而无需调整图像大小。在大多数情况下，PNG压缩足以在很小的文件大小成本下处理这个问题。
答案 4 :(得分：0)
我把钱放在了图像下载的瓶颈而不是渲染引擎进行平铺，所以选择1像素宽的选项。
24位PNG也是多余的，因为你仍然只能获得每通道8位（红色，绿色和蓝色）。
答案 5 :(得分：0)
我通常更喜欢介于两者之间，1像素宽可能会使你的渐变看起来有点不清楚，但你可以做5像素宽度的东西，这为梯度提供了足够的空间，以保持整个页面的一致性和清晰度..但我会建议您可以向单个图像添加更多图案和图像，然后使用背景定位（css sprites）来定位它们，因为下载50kb的单个图像将花费更少的时间与5个40kb图像相比，因为浏览器会减少请求到服务器......
答案 6 :(得分：0)
我没有对此进行基准测试，但我敢打赌，在大多数现代计算机上，渲染不会成为问题，而您总是希望节省图像下载时间。我经常选择1px类型的图形。