css - 整页 CSS 背景图像

Question

如果我有一个大图像background-image用于我的 html 页面，如何使整个页面加载更快？拥有大型背景图像的最佳做法是什么？

谢谢

Answer 1

最好的做法是有一个小的背景图像。如果您有重复的背景图像，请尝试将其限制为最小的重复单元；CSS 将自动在 x 和 y 方向上无限重复图像。'

如果您有非重复的背景图像，那么您显然无法裁剪图像以使其更小。在这种情况下，您可能需要设置background-size:cover，background-repeat:no-repeat以便整个图像填满整个碎石而不重复。这里的最佳做法可能是使用一些高压缩文件，例如 JPEG 而不是 PNG。

Answer 2

尽可能压缩图像。您的瓶颈是通过网络传输的数据 - 页面等待 CSS 完成加载以“准备好”，因此需要传输的字节越少越好。或者，您可以将您的静态资产存储在像 Akamai 这样的 CDN 上，这将在离用户更近的位置以极快的速度提供服务。