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

pictures take a while to load on website?

本文关键字：加载 网站 一段时间      更新时间：2023-09-26

我几个小时前也发过类似的帖子，但写得很差，很懒。所以我重新发帖，因为我毁了那个帖子，但仍然需要帮助。很抱歉任何读过第一篇文章的人，这太糟糕了。

这是我的网站：

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

当我在新浏览器上查看我的网站时，图像加载时间明显较长。我所说的图片是在艺术家页面上看到的(链接到上面(以及个人艺术家页面上的图片(http://top-drawer.net/artist-1.html)。

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

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

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

虽然用CSS调整了图像的大小，使其看起来很小，但实际上它们仍然很大：

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

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

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

  • 压缩图像(使用jpg等有损压缩，而不是png等无损压缩(

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

  • 对请求使用压缩(这是对图像本身进行压缩的补充(

  • 使用没有阿尔法通道的图像(如果有，它们会更大(

  • 正在加载所需大小的图像。在客户端调整大小真的很昂贵！

  • 消除图像元数据，如地理信息(它占用空间并使您的图像更大(

有关更多详细信息，我强烈推荐谷歌的这篇博客文章：https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization?hl=en.

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

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

您可以尝试使用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的调整大小方法(或者，更好的方法是：this(，然后在获得新文件后；使用readfile"回显"新调整大小的文件。有很多不同的方法可以做到这一点，如果你不了解PHP，请告诉我们；我会为你做的。

相关文章：