重复的网站背景图片 - 大小VS速度

Question

，如果任何人已经做与背景图像的任何测试中，我想知道。我们通常创建重复在一个方向（X或Y或两者）的至少一个背景

示例结果 比方说，我们有一个渐变的背景是，在X方向重复。梯度高度为400像素。我们有几种可能性。我们可以创建小图像越好（1个像素宽度和400个像素高），或者我们可以创建具有400个像素高度较大的图像。

<强>观察结果 由于梯度400个像素高，我们可能不会选择GIF格式，因为它只能存储256种自适应颜色。也许这就是enaough如果我们的梯度是微妙的，因为它没有那么多，但除此之外，我们可能会相当店面形象作为一个24位的PNG图像保存完整的梯度细节。

<强>困境结果 我们应该创建将被重复1×400像素尺寸的图像的名词的次水平或我们应该创建100×400像素尺寸的图像，以加快渲染在浏览器中，并有一个较大的图像文件大小

因此。 图片尺寸与渲染速度吗哪一个赢了？有人关心，以测试这个？至于浏览器渲染速度和可能的小图像重绘闪烁...

Answer 1

在渲染速度的瓶颈在这里，因为更大的瓷砖可以被放入浏览器的缓存。

其实我已经尝试过本作的主要浏览器，并且至少其中一些呈现明显慢于非常小的瓷砖。

因此，如果增加位图大小不的可笑的大文件大小的结果，我肯定会与该走了。测试它自己看看。 （请记住，包括IE6，因为仍有很多人都坚持了下来）。

您可能能够打击位图大小和文件大小之间的良好平衡，但总的来说我想尝试50x400，100x400，200x400，甚至400x400像素。

Answer 2

我发现，有可能在浏览器的渲染性能的巨大差异，如果有背景图像与1px的宽度和重复它。最好是有一个背景图像与稍大的尺寸。所以用100像素宽的图像进行浏览器要好得多。这尤其进场时您在您的网站上拖动层使用重复的背景图像。拖性能是非常糟糕与经常重复的背景图像。

Answer 3

我想指出的是，发送下一个额外的几行的成本（这里1-2只例子）.8k - 1.6kb的（如果你能摆脱8位）更像是2.4kb - 4.0kb为24位

2像素列更多装置的blit中削减到1/3长达1.6kb的背景所需要的所需的迭代（8位）或4KB（24位）

甚至1额外的列向下减半需要一半的元件宽度的blitting。

如果背景在不到一秒钟完成一个56.6K调制解调器我认为这是不够瘦。

Answer 4

如果的图像尺寸小有上呈现的负面影响，我敢肯定，任何像样的浏览器将在内部几次贴砖前位块传输图像。

这就是说，我倾向于不使用1米像素的图像的尺寸，所以可以清楚地看到该图像而不调整其大小。 PNG压缩是不够好，以非常低的成本来处理这个文件大小，在大多数情况下。

Answer 5

我把钱上的瓶颈是图像下载，而不是渲染引擎做拼接，所以去为1个像素宽的选择。

另外，24位PNG是多余的，因为你仍然只获得了每通道8个比特（红色，绿色和蓝色）。

Answer 6

我一般喜欢之间，1像素宽很可能会使梯度进去显得有点不清楚，但你可以这样做5pixel宽度赋予足够的空间梯度，以保持整个页面的一致性和清晰度..但我会建议你可以添加更多格式和图像到一个图像，然后使用背景定位（ CSS精灵 ）以定位它们，因为下载发言权50KB的单一图像将采取因为浏览器comapared至5个40KB图像更短的时间使更少的请求到服务器...

Answer 7

我没有基准，但我敢打赌大多数计算机上渲染将不再是一个问题，而你总是要保存上的图像下载时间。我经常去的1px的类型的图形。