图片需要一段时间才能在网站上加载？

Question

几个小时前我发了一篇类似的帖子，但写的很糟糕，很懒。 所以我发帖，因为我破坏了那个帖子，但仍然需要帮助。 对于阅读第一篇文章的人来说，这太可怕了。

这是我的网站：

http://top-drawer.net/artists.html

当我在新浏览器上查看我的网站时，图像显然需要很长时间才能加载。 我正在谈论的图像是在艺术家页面（上面链接）上看到的图像以及在个人艺术家页面上的图像（ http://top-drawer.net/artist-1.html ）。

当我试图向某人展示网站时，图像加载到位的时间长度看起来非常不专业。

是什么导致了这个加载时间？ 我该如何解决这个问题呢？

仅供参考我目前正在查看我在chrome中的工作。 任何答案都将非常感谢。 但是如果可能的话，如果你能解释你的答案的逻辑，那么对我来说真的很有帮助，因为我想要真正理解/学习不只是复制你的代码。 但当然感谢任何花时间发布答案的人。

Answer 1

虽然您的图像已经使用CSS调整大小以显示小，但它们实际上仍然非常大：

http://top-drawer.net/images/bennyPalmer/2.jpg(1280x849 ,近300KB）

这意味着下载需要更长时间。 对于缩略图，请创建您想要的大小的新图像，然后使用它们。 目前，您的主页上有大约3MB的图像。

Answer 2

您需要优化图像。 技术包括：

• 压缩图像（使用有损压缩，如jpg，无损压缩，如png）

• 首先将较低质量的图像作为占位符加载，然后在后台加载较高质量的图像并在加载时替换它们

• 对请求使用压缩（除了压缩图像本身之外）

• 使用没有alpha通道的图像（如果有的话，它们会更大）

• 加载完全符合您需要的尺寸的图像。 在客户端调整大小非常昂贵！

• 消除图像元数据，例如地理信息（占用空间并使图像更大）

有关详细信息，我强烈推荐谷歌发布此博客文章： https ： //developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization？hl = en 。

Answer 3

由于其他答案建议减少图像的大小，以下是一些在线实用程序，它们将帮助您：

1. http://www.reduceimages.com/
2. http://jpeg-optimizer.com/
3. http://www.picresize.com/
4. http://www.imageoptimizer.net/Pages/Home.aspx

Answer 4

您可以尝试使用PHP页面在现场调整图像大小。 例如，您可以使用以下文件结构来帮助：

 Document Root
 - img
 - - 1.png
 - - 2.png
 - - 3.png
 - - resize.php
 - index.php

无论何时在index.php引用图像，请使用/img/resize.php?file=1.png&size=(Size Syntax Of Your Choice) 。 在PHP文件中，获取文件的内容并使用PHP的调整大小方法（或者更好的是： 这个 ），然后获得新文件; 使用readfile来“回显”新调整大小的文件。 有很多不同的方法可以解决这个问题，如果你不知道PHP告诉我们; 我会为你做的。