图片需要一段时间才能加载到网站吗？

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通道的情况下压缩图像themselves)
• Using图像(如果有alpha通道，图像会更大))
• 加载的图像大小恰好是您需要的。在客户端调整大小实际上是expensive!
• Eliminate图像元数据，例如地理信息(它会占用空间并使图像变大)

有关更多细节，我强烈推荐谷歌的这篇博文：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