如何加快背景图像？

Question

最近，我一直在开发一个以大背景图片的形式包含大量艺术品的网站。在很多高预算的高端网站上，大型背景图像似乎几乎立即加载，而我的平均需要1-2秒。

我的问题是，如何实现更快的背景图像加载？我已经压缩了我的图片并使用了相应的文件类型。

以下是立即加载背景图片的网站示例： http://lanadelrey.com/

Answer 1

您可以包含几种可以加快图像加载的验证：

1. 将background-image CSS属性放在HTML文件的head中，该文件将比CSS文件中的文件更早开始下载。

了解浏览器如何加载资源以及解释已加载的文件非常重要。



Google Chrome调试工具中的网络功能可能会有所帮助，但如果您真的想了解这一点，请阅读：https://varvy.com/pagespeed/display.html和https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

1. 在不同的域上提供图像和更大的资源，浏览器将并发连接数（文件下载）限制为单个域。或者只使用CDN。

2. 缩小图片的文件大小。

Answer 2

图片尺寸有多大？在您提供的示例链接上，您可以从此链接获取背景图片：

http://cdn1.umg3.net/89-cdn/splash2015/lana-splash-background-2.jpg?v=1

只有147KB。对我来说，这并不是很大，而且加载速度很快。

为了更快地加载图片，您可以做出许多不同的事情：

1. 使图像尺寸更小，（更低分辨率，jpg压缩等）
2. 租高速服务器。它们的成本更高，但是如果你需要更高的速度，你必须为此付费，因为低速服务器可能会成为瓶颈。

我希望这有帮助！

Answer 3

最值得注意的是，服务器的质量将提高用户获取图像的速度。但是，当您在CSS中加载多个背景时，可以轻松优化某些内容。

首先，重要的是要知道即使元素不可见（例如display: none），仍然会加载CSS文件中定义的背景图像。 （加载this fiddle并查看devtools的网络选项卡，您将看到图像已加载。）这是一些重要信息，因为它意味着将为进行并行请求所有图像（甚至是不可见的图像）都会占用带宽。换句话说，加载速度很慢，部分原因是浏览器正在加载它不需要的图像。

对于解决方案，您需要一些JavaScript，因为您需要做一些事情：

• 最初只加载你需要的背景图片（可以在CSS中完成）
• 在后台加载其他图片
• 在加载完成后立即动态地将CSS background属性插入元素

另一种解决方案是使用延迟加载，而不是以任何方式在背景中加载图像，只有当（相对）确定用户需要查看背景图像时才开始加载图像（例如，图像的位置接近在视口中可见。