图像渲染速度优化答案

【问题标题】：Image rendering speed optimization图像渲染速度优化
【发布时间】：2013-03-15 10:59:52
【问题描述】：

我有一个我正在使用 PHP 构建的应用程序，它根据给定植物物种的图像数量从数据库中调用照片。我让脚本将原本较大的照片调整为 100x100。这个过程确实占用了页面加载时间，我的计算机的 CPU 达到 100% 并且工作非常努力。

我认为这是因为所有图像都同时加载...有没有办法让它们仅在前一个完成时才加载？或者有没有更有效的方法来渲染这样的图像？这是加载它们的 sn-p：

$imagesArray = explode(", ",$images);
unset($imagesArray[count($imagesArray)-1]); // get rid of the last array key which is blank.
echo '<tr><td>Images:</td><td>';
foreach ($imagesArray as $imgloc)
{
  echo '<a target="_blank" href="plant_images/'.$imgloc.'"><img src="plant_images/'.$imgloc.'" width="100" height="100" alt="'.$row[2].'" title="'.$row[2].'" /></a>&nbsp;';
}

这是页面中部分加载的图像的屏幕截图（这比其他时候发生的要好得多！说真的，有些物种有 10-12 张图像，我的电脑需要大约 15 秒才能加载页面，很痛苦）

http://www.captainscall.site11.com/temp_stuff/slow-img.png

我已经找到this，有点帮助。非常感谢你，哈纳克

【问题讨论】：

您是否调整了这些缩略图的大小？在我看来，它们显示的是原始尺寸，缩小了。
@ThomasHambach 我没有调整它们的大小；它们正是原始图像，呈现为 100 x 100。我真的不喜欢调整所有它们的大小..
如果您在客户端使用 Javascript，则只有在前一张图片加载完成后才能请求图片。

标签： php html image

【解决方案1】：

用户的浏览器通常会缓存图片，这样用户只有在第一次访问页面时才会感到加载缓慢。

但是，您应该考虑拥有正在显示的所有图像的缩略图。您不需要自己制作这些缩略图，2013 年我们有电脑可以做到这一点。

快速的 google 搜索可能会为您提供一些软件，可以立即为您的所有图片制作调整大小的副本，或者如果您知道一些编码，您可以为此编写自己的脚本。例如，您可以在 PHP 中使用 Imagick（参见 http://php.net/manual/en/imagick.scaleimage.php）。然后只需在您的服务器上存储两种尺寸的图像，一种用于缩略图，另一种具有更高的分辨率。

这样做的一个好处是您将减少从您的服务器传出的数据（如果您的服务器有很多唯一身份访问者，由于图像的大小将会有很多流量）。此外，您的用户将体验到更少的网站加载时间（正如您所说，等待图片加载很无聊）。

你可以用javascript告诉浏览器以什么顺序加载图片，但这并不能解决你的问题，主要是你的图片太大了。

【讨论】：

imagick 看起来不错。我可以用那个。似乎调整大小确实是解决这些问题的唯一方法。

【解决方案2】：

我认为你应该：

服务器端：已经生成的图片需要缓存，下次可以使用缓存版本。您可以创建一个物理图像文件以供下次使用。
客户端：您可以使用库来延迟加载图像
- http://www.appelsiini.net/projects/lazyload
- 您可以实现一个 JavaScript 函数，在特定秒后加载图像。

【讨论】：