导入大图像最有效的方法？

Question

我有兴趣在我的网站上添加一个landsacpe页脚，但图像大小为115KB并且会在每个页面上加载...是否有任何有效的方法来加载像这样的巨大图像：

http://gyazo.com/5b1b7312ec4370873368df0181e41b13.png

Answer 1

以下是一些可能对您有所帮助的事情：

编辑：我尝试了下面列表中的第二个提示（tinypng.com），它将图像的大小减小了71％到39.1 KB。这是一个很大的胜利。

1. 确保在您的网络服务器上设置缓存标头，以便浏览器可以缓存该文件。在使用图像的所有其他时间也使用相同的URL。执行这两个简单的操作将确保只在浏览器第一次请求时才下载图像。所有其他时间它将从浏览器的缓存中加载。

2. 务必检查图像是否尽可能小。如果您使用PNG，则使用https://tinypng.com/等工具将所有元数据压缩出图像。如果您使用JPEG，那么可能会降低其质量。如果您使用Photoshop，请确保“保存图像为Web”。这也会减小尺寸。对于照片，您最好使用JPEG，对于需要无损的文本或其他图像使用PNG或GIF。

3. 加载图片不会真正减慢您的网页速度。反正不像JavaScript。加载Javascript将阻止页面的呈现，直到下载JS文件，除非您使用特殊的加载技术。图像不是这种情况：页面将继续呈现，用户可以开始使用该页面。

4. 如果使用IMG标签放置图像，请确保在CSS中设置图像的宽度和高度（或使用img width和height属性）。这将确保浏览器在下载图像时不需要重排页面。在下载图像之前，它将知道它需要的大小。

5. 浏览器将为每个域提供最大并行请求数。如果图像的优先级非常低，您可以推迟加载并等待onLoad事件。这将确保首先下载其他资源（具有更高的prio）。这将需要一些JavaScript，但不是那么多（使用图像延迟加载器，有很多）。

6. 正如我在上一项中所述，这是每个域名的最大请求数。这就是为什么你也可以创建一个新的（子）域并从那里加载一些内容。它将增加将并行下载的资源总数。使用CDN也会有所帮助，因为它们也有一个单独的域（并且它们也经过优化）。

7. 如果您想阅读有关此类优化的一些非常好的书籍，请阅读以下内容： http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309 http://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304