重复网站背景图片 - 大小与速度答案

【问题标题】：Repeating website background image - size vs speed重复网站背景图片 - 大小与速度
【发布时间】：2010-12-04 13:22:13
【问题描述】：

我想知道是否有人对背景图像进行过任何测试。我们通常会创建一个至少在一个方向（x 或 y 或两者）重复的背景。

示例
假设我们有一个在 X 方向上重复的渐变背景。渐变高度为 400px。我们有几种可能性。我们可以创建尽可能小的图像（1 像素宽和 400 像素高），或者我们可以创建一个 400 像素高的更大图像。

观察
由于渐变是 400 像素高，我们可能不会选择 GIF 格式，因为它只能存储 256 种自适应颜色。如果我们的渐变很微妙，也许这就足够了，因为它没有那么多，但否则我们可能宁愿将图像存储为 24 位 PNG 图像以保留完整的渐变细节。

困境
我们应该创建一个 1×400 px 大小的图像，将水平重复 n 次，还是应该创建一个 100×400 px 大小的图像以加快在浏览器中的渲染并拥有更大的图像文件大小。

所以。 图像大小与渲染速度？哪一个胜出？有人愿意测试这个吗？关于浏览器渲染速度和可能的小图像重绘闪烁......

【问题讨论】：

我一直追求尽可能小的文件大小，从来没有遇到过任何问题。但这并不科学。
复制：stackoverflow.com/questions/1504022/…

标签： html rendering background-image

【解决方案1】：

渲染速度是这里的瓶颈，因为更大的图块可以放入浏览器的缓存中。

我实际上已经在主流浏览器上尝试过这个，至少其中一些浏览器在非常小的图块上渲染速度明显变慢。

因此，如果增加位图大小不会导致可笑大文件大小，我肯定会这样做。自己测试一下看看。（记住要包括 IE6，因为仍然有很多人坚持使用它）。

您也许可以在位图大小和文件大小之间取得良好的平衡，但通常我会尝试 50x400、100x400、200x400 甚至 400x400 像素。

【讨论】：

好吧，我猜宽度稍大一点（如 50 像素）的渐变不会对文件大小产生太大影响。
也许可以试试 2 的幂次方（即 32 或 64 像素宽），这在这类情况下通常会有所帮助。
感谢 2 小费的强大功能。真的是个好东西。我会记住这个提示。

【解决方案2】：

我发现如果你有一个宽度为 1px 的背景图像并重复它，浏览器的渲染性能可能会有很大差异。最好有一个尺寸稍大的背景图像。因此，宽度为 100 像素的图像在浏览器中的表现要好得多。当您在网站的可拖动层中使用重复的背景图像时，这尤其会发挥作用。对于经常重复的背景图像，拖动性能非常糟糕。

【讨论】：

【解决方案3】：

我想指出的是，为了发送额外的几行（此处仅示例 1-2）0.8k - 1.6kb（如果您可以使用 8 位）而不是 2.4kb - 24 位为 4.0kb

多 2 像素列意味着将 blit 背景所需的迭代次数减少到 1/3，最高可达 1.6kb（8 位）或 4kb（24 位）

即使是多出 1 列，所需的 blitting 也会减半。

如果 56.6k 调制解调器的背景在不到一秒的时间内完成，我认为它已经足够精简了。

【讨论】：

【解决方案4】：

如果图像的小尺寸对渲染有负面影响，我相信任何体面的浏览器都会在平铺之前在内部对图像进行几次blit。

也就是说，我倾向于不使用 1 像素的图像尺寸，因此无需调整大小即可清楚地看到图像。在大多数情况下，PNG 压缩足以以极少的文件大小成本处理此问题。

【讨论】：

【解决方案5】：

我会把钱放在图像下载的瓶颈上，而不是渲染引擎进行平铺，所以选择 1 像素宽的选项。

24 位 PNG 也是多余的，因为每个通道仍然只能获得 8 位（红色、绿色和蓝色）。

【讨论】：

这是 2^8 x 2^8 x 2^8 可能的颜色，明显大于 256。我完全误解了什么吗？
在从一种颜色到另一种颜色的渐变中（假设只使用两种颜色），那么您将只能获得 256 种离散颜色。我想？诅咒，现在我开始怀疑自己了。关闭到 Photoshop。 . .
这将取决于您的渐变，但举一些例子：从 RGB(0,0,0) 到 RGB(255,0,0) 的线性 RGB 渐变只有 256 种颜色. RGB(0,0,0) 到 RGB(255,255,255) 理论上可以有 3*256 个色度，但更有可能只有 256 个色度。更接近的颜色将有更少的色度。
Paint.NET 自动检测所需的位深度；有用。
除非您的渐变从黑色变为纯色之一（R、G 或 B），否则您对颜色的看法是错误的。或者从纯色到白色（但这个也可以有超过 256 个级别）。但在任何其他情况下，您最终都会得到任意数量的级别。

【解决方案6】：

我通常更喜欢介于两者之间，1 像素宽可能会使您的渐变看起来有点不清楚，但您可以执行 5 像素宽之类的操作，这样可以为渐变提供足够的空间以保持整个页面的一致性和清晰度。但我会建议您可以向单个图像添加更多图案和图像，然后使用背景定位（css sprites）来定位它们，因为下载单个 50kb 的图像与 5 个 40kb 的图像相比需要更少的时间，因为浏览器对服务器...

【讨论】：

我不是在谈论通常使用精灵的内容图像。我更多的是考虑不是精灵并且不可能的页面背景。
对不起，可能误解了这个问题......有点把它带入了错误的方向
您仍然可以为此使用精灵 - 您可以将水平平铺的背景放在一张图像中，即一张 5x200 像素的图像和两个 5x100 像素的渐变。
授予...但它可能会进一步影响渲染。我想应该是的。

【解决方案7】：

我没有对此进行基准测试，但我敢打赌，在大多数现代计算机上，渲染不会成为问题，而您总是希望节省图像下载时间。我经常选择 1px 类型的图形。

【讨论】：