CSS平铺背景图像的最佳尺寸

Question

通常说，使用background-image来平铺网页背景时，由于需要较少的平铺次数，因此使用更大尺寸的图片可以提高性能。我一直使用8x8像素或8的倍数的尺寸。

但是，有没有数据证明在各种浏览器中，从渲染时间或页面渲染的不同阶段的CPU负载等方面证明这一点呢？

- Andy Hume

---

这将在不同的浏览器之间产生很大的差异。也许可以说明哪些浏览器最为重要。 - Pekka

最感兴趣的是IE 8/9以及最新版本的Firefox/Safari/Chome/Opera。 - Andy Hume

Answer 1

我想在这些你在评论中列出的现代浏览器中，这对于浏览器的影响非常小：

IE 8/9以及最新版本的Firefox/Safari/Chome/Opera。

然而，我听说IE8存在一个bug，当图片大小恰好为1px * 1px时会出问题：

当页面上的任何其他元素使用“-ms-filter”指令进行alpha透明度时，Internet Explorer 8无法正确地重复1x1像素半透明背景图像。

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

请参见：http://nemesisdesign.net/blog/coding/ie8-1x1px-semi-transparent-background-bug/
以及演示：http://static.nemesisdesign.net/demos/ie9-1x1px-semi-transparent-background/ 所以，8x8似乎是一个足够好的尺寸。如果在互联网上有人非常在乎这个问题并进行了严密的基准测试，我会感到惊讶。

---

我找到了这篇文章，讨论了这个主题：http://blogs.adobe.com/dreamweaver/2011/02/optimal-css-tiled-background-image-size.html 请务必阅读评论。

总之，我要引用几个月前自己的话来总结一下：

我想，在你评论中列出的现代浏览器（IE 8/9和最新版本的Firefox/Safari/Chome/Opera）中，这很少有影响。

- thirtydot

---

浏览器可以下载的最小字节数是1K。这似乎完全是错误的解释方式。他的意思是，尽量保持在1KB以下，以避免发送多个数据包。这样说有道理，但他的表述方式让人感觉好像浏览器对于任何大小的响应都会下载1k。这肯定不是真的，对吧？ - Andy Hume

那个句子的措辞不太好 - 实际意思是，如果你下载一个200字节的图像，它仍然需要几乎相同的时间来下载一个1KB的图像，因为它仍然需要一个数据包来发送。我提供了一个更好的措辞，表达了其背后的意图（请参见MTU链接）。 - thirtydot

有趣的想法，但事实并非如此。数据包不会填充到MTU大小或其他任何东西...它是最大传输单元，而不是最小单元。不像在硬盘中存储文件，无论多小都占用至少4096字节。就传输时间而言，较短的仍然更好，尽管第二个数据包的边际成本远高于第一个数据包中一个额外字节的边际成本。虽然OP似乎只关心渲染速度，而不是数据传输。 - Peter Hansen

@Peter Hansen：是的，我通常知道自己在说什么，但是当我读到之前回答的第二部分时，即使是我的废话检测器也会亮起来。我已经编辑过了，以减弱那一部分的重点。 - thirtydot

Answer 2

在某些电子邮件客户端中，除非背景图像至少为25X25，否则图像不会重复，因此我已将其设为默认大小。

- peer1sucksbigones

Answer 3

我认为没有“最佳尺寸”，但普遍意见是较大的尺寸比小的更好：请参见这个问题和这个问题。

- Kyle

---

当然，我知道这是普遍的观点。我也确信这是正确的。但我特别想要的是证明它的数据和例子。 - Andy Hume