加快图像加载速度

Question

您对网络技术概念不熟悉，我有两个问题。

Q.1）假设我的图片大小为400KB，我想在我的网页上加载它。我想知道以下哪一步更快

a）一次加载整个400KB图像。

b）拥有上述图像的4个图块（每个100 KB）并逐个加载。

Q.2）如果要在网页上加载4张图像，是否可以按时间间隔请求每张图像或立即请求它们。

如果问题很愚蠢，请耐心等待。

Answer 1

1. 将多个图像捆绑在一起称为“精灵” - 请参阅here，通常保留用于较小的图标式图像，很少用于大型背景和内容图像。

2. 还有一个创建图像的过程，GIF和PNG，可让您控制感知或真实的表现 - 隔行扫描和渐进式图像：here和here。

Answer 2

如果页面中有多个图像，通常的方法是使用图像精灵。最好将网络流量限制在最低限度，包括很多延迟。

Answer 3

1. 优化网络图像 - 400kB非常高，即使您将其分成4个部分。考虑使用2G或其他慢速网络在移动设备上打开您网站的用户。仅适用于在办公场所内用于企业用途的网站/应用程序。

2. 根据Hanish的建议 - 使用精灵图片 - check example on W3Schools。

3. 尽可能使用CSS效果而不是图像。我知道横幅广告或广告图片无法实现这一点，但仍有助于降低整体网络使用率。

Answer 4

甚至更疯狂的是将图像作为base64文本嵌入到html中。这确实将实际图像大小增加到比图像本身更多，但是没有必要的请求。

http://www.base64-image.de

Answer 5

虽然你的问题不是关于本身的编程，但我会幽默你的问题。

在这样的情况下，最好是构建一些有效的东西，如果速度是一个问题在实践中，通过准确计时来找出问题所在。 Stack Overflow上有很多关于时间安排的帖子，所以我不会深入研究这个问题，因为你应该对此进行研究。

也就是说，考虑到互联网上的大多数人400KiB是一个需要担心的微不足道的事情。 （当我输入这个时，我正在以4.5MiB / s的速度下载一个洪流，并在单独的标签中播放音乐 - 我知道我比世界其他地方更幸运，但这说明你不应该这样做'这个太过担心了。我强烈建议你在担心这个问题之前做一些分析。

最简单的方法是使用您选择的浏览器以及运行的开发人员工具（通常为F12或Ctrl-Shift-C）进行新的页面加载。以下是今天加载guardian.co.uk的时间如何在Chromium中显示：

然而，毕竟，通常的建议是尽可能减少HTTP请求，因为每个请求都会引入页面加载的延迟。如果从单独的域中检索资产，尤其是额外的DNS查找会增加更多延迟，则会出现这种情况。

所以：

<强> 简介<！/ EM>

然后最小化HTTP请求并压缩图像。

回答您的具体问题

1a：一次加载整个图像，技术上花费的时间比分成4的相同大小的图像少，因为额外的HTTP请求引入了延迟。但是，浏览器在完全下载之前可能无法呈现它（在实践中很少出现问题）。

2：不会。除非你做的事非常花哨，否则你的浏览器和操作系统会安排你的请求时间。