如何更快地加载背景图像? [英] How to load background images faster?

问题描述

最近，我一直在一个网站上工作，该网站以大背景图像的形式包含大量艺术品.在许多预算较高的高端站点上，大型背景图像似乎几乎是瞬间加载的，而我的平均时间约为1-2秒.

我的问题是，如何才能更快地加载背景图像?我已经压缩了图像并使用了适当的文件类型.

这是一个具有即时加载背景图片的网站的示例:

Google Chrome调试工具中的网络功能可能会有所帮助，但是如果您真的想了解这一点，请阅读: https://www.html5rocks.com/zh-CN/tutorials/internals/howbrowserswork/

2. 在其他域中提供图像和更大的资源，浏览器将并发连接(文件下载)的数量限制为一个域.或者只是使用CDN.

3. 减小图像的文件大小.

Recently I've been working on a site that incorporates a heavy amount of artwork in the form of large background images. On a lot of high end sites with big budgets large background images seem to load in almost instantly, whereas mine seem to take 1-2 seconds on average.

My questions is, how can I achieve faster loading of background images? I've already compressed my images and used the appropriate file types.

Here's an example of a site with an instantly loading background image: http://lanadelrey.com/

解决方案

There are several optomizations that you could include to make the image load faster:

1. Place the background-image CSS property in the head of your HTML file, which will start downloading it earlier than if it was in a CSS file.

It's important to understand how a browser loads resources, and interprets the files that it has loaded.

The network feature in Google Chrome's Debug tools can be helpful, but if you really want to understand this then read: https://varvy.com/pagespeed/display.html and https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

2. Serve your images and larger resources on a different domain, browsers limit the number of concurrent connections (file downloads) to a single domain. Or just use a CDN.

3. Reduce the file size of your image.

这篇关于如何更快地加载背景图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！