css - 背景图像是否有理想的尺寸？

Question

例如，1x1 图像的加载速度会比 2x2 快吗？尺寸会更小，但浏览器必须工作两倍，对吧？

那么，背景图像是否有理想的尺寸和形状（方形与矩形）？

我知道这可能不太重要，但我有兴趣知道。

谢谢

Answer 1

我认为您的图像没有“理想”尺寸。

虽然图像的质量会对下载时间产生影响。与具有相同尺寸的另一个图像相比，嵌入了丰富色彩的图像在尺寸上会很重。

最后，背景图像的选择完全取决于您的需要。如果您需要 2*2 图像，则必须包含该图像。

如果您需要使用大量背景图像来优化网站的性能，那么您可以查看

CSS 精灵

以及一些图像优化工具

12个对网页设计师真正有用的图像优化工具

Answer 2

我注意到在许多浏览器中平铺非常小的图像（例如 1×1 或 2×2）非常慢。由于大多数压缩图像格式几乎没有重复较大的缺点，我认为至少对于平铺图像，您应该选择至少 50×50 像素左右的图像，以降低 UA 中的绘图复杂性。

Answer 3

有趣的问题。您必须询问每个浏览器供应商，因为他们每个人都有不同的呈现图像的方式。

但实际上，忽略下载时间，渲染时间的任何差异都可以忽略不计，因此如果可以的话，使用较小的图像是有意义的。

我还要指出，如果您使用的是 1x1 重复图像，那么您应该使用背景颜色。

Answer 4

理想的大小会因浏览器而异，因系统而异。

避免让它太小或太大。大小为 1x1 的背景图像在某些浏览器中可能存在渲染问题。您至少应该在每个维度上设置几个像素。

我记得如果图像宽度小于十像素，Netscape 4 会拒绝重复图像。今天的浏览器不那么敏感，但不要让图像太小仍然有意义。

图像的压缩（至少对于 GIF 和 PNG 图像）是基于重复的，因此如果通过重复使图像变大，额外的图像大小对文件大小的影响很小。

Answer 5

请注意：如果您想加快下载速度，下载 1x1 图像与 10x10 图像的开销可以忽略不计，尤其是对于客户端和服务器的压缩图像。

因此，由于使用 10x10 渲染肯定更快/更好，因此选择更大的图像尺寸。