加载大图的速度更快

Question

有哪些加载大图更快的技巧。我看了这个网站：

http://vivianoheatingandcooling.com/wp-admin

和这个

http://iplanwebsites.com/404

这两个图片都很大，但加载速度非常快。我也见过一些网站会在内容两侧放置两张大图来做广告：

http://www.gamefaqs.com/

GameFAQs经常这样做。他们在页面内容顶部快速加载这些大图像，他们是怎么做到的？除了进行Web优化保存之外，我是否还错过了一些技巧？

- Howdy_McGee

Answer 1

图像优化是其中一个关键，另一个关键是设计使优化更有效。对于照片来说这并不容易，但你可以处理照片以更好地进行优化。

在跳跃绵羊的情况下，图像在分辨率方面实际上相当小。它是550 x 1900，仅重150k。考虑到这几乎是正在加载的所有内容，向服务器发送的请求很少，几乎没有开销……在大多数良好的互联网连接上，这将加载非常快。

另一张图片是GIF格式的颜色非常少的图片。如果你的调色板相对有限，你可以在PNG和GIF中拥有非常高分辨率的图片并获得非常小的文件。这就是这些格式的优点所在——在这种情况下，这张图片应该是png格式。作为png格式，并经过pngcrush处理，它只有40.5kb，而不是62kb。

因此，图像优化和减少开销（每个视图只加载用户需要的内容）是迅速加载大型图像的重要步骤。

- Steve Adams

---

通常我使用Photoshop的“保存为Web”功能，只需在不同格式之间切换并更改显示的颜色数量。这是一个好的做法吗？我应该调整其他选项吗？ - Howdy_McGee

了解不同情况下格式为什么有效有很大帮助。并没有规定每种格式“必须”用于 x 或 y，如果你知道每种格式在保存图像时的作用，就会知道如何针对特定格式优化特定图像。编辑：Smashing magazine 提供了一个不错的 PNG 优化 和 JPEG 的解释。 - Steve Adams

Answer 2

让我们以iplanwebsites.com/404为例：

1. 它是一张尺寸很大的图片（宽X高=550px X 1900px） 2. 但是，它是一张低质量的图片-141.14 kb-这就是为什么这张图片加载得非常快的原因。您可以使用软件工具优化您的图片，但您会看到图像质量上的一些差异。 3. 对于其他两个示例也是如此-它们使用大型图像，但只有一些黑色简单的形状，这意味着文件大小较小。 4. 记住：这不仅关乎宽度和高度，还关乎图片质量、像素数量、颜色数量等。

斯特凡

- igniter