Question

我目前正在投资组合网站，我必须在同一页面上加载大量照片。

这些图像是通过PHP动态加载的，目前我选择保存这些图像的缩略图版本并加载它们。

然而，我担心如果网站拥有大量用户，这可能不是最佳解决方案：我基本上会将每个图像的副本乘以用户上传的图像数量。

我的问题是，是否有更好的解决方案可以解决这个问题？一种尽可能快地加载页面而不会占用太多空间的方法吗？

非常感谢。

Answer 1

加载一个包含大量图片的网页会很慢。原因是因为传输这些图像所需的带宽。

你有几个选择

以平铺模式加载完整图像。这些图像将是完整图像，只需调整大小以适合“缩略图”视图。这样做的好处是您只保存了1张图像，但该图像是全尺寸的，并且需要很长时间才能加载。
按照您所说的方式加载缩略图。这样做的好处是性能，但您需要存储每个图像的两个副本。此外，根据您如何处理缩略图创建，您可能需要用户上传图像的两个副本以提供他们自己的缩略图...这可能会发臭。
加载缩略图，但在上传时动态生成缩略图。您实际上是在磁盘上保留了两个映像副本，但是您通过一些php映像修改API动态创建它。这将加载更快，但仍占用磁盘空间。它还最大限度地减少了提供缩略图的用户/管理要求。
在请求页面时按需加载缩略图。这种方法需要一些测试，因为我从未尝试过。基本上，您将调用php图像修改API（或者更好的源代码到本机解决方案！）来创建要使用的一次性使用（或缓存）缩略图。你可能会说“OMG，这需要这么长时间！”。我认为如果您应用适当的缓存机制，这种方法实际上可能是可用的，因此您不会不断地重新创建相同的缩略图。它会降低带宽，因为这里的限制因素是网络连接，它可能比发送完整图像更快（因为创建缩略图的限制因素现在是CPU /内存/硬盘）。

我认为＃4是一个有趣的概念，可能值得探索。

Answer 2

即时生成大图像的缩略图。（Some hint）
异步加载图片（尝试JAIL）
PAGINATE
缓存也是一种选择，从第二次加载网站开始工作。

Answer 3

我的想法是：

一个。利用缓存（系统缓存，标头缓存，HTTP缓存......所有缓存）

B中。不要一直生成Thumb

℃。使用Gearman或beanstalkd等作业排队系统生成大拇指，这样您就不必立即执行此操作

d。使用Imagick效率更高

电子。 Paginate

F。示例仅在修改原始文件时生成拇指

$file = "a.jpg" ;
$thumbFile = "a.thumb.jpg" ;
$createThumb = true;
if(is_file($thumbFile))
{
    if((filemtime($file) - 10) < filemtime($thumbFile));
    {
        $createThumb = false;
    }
}


if($createThumb === true)
{
    $thumb = new Imagick();
    $thumb->readImage($file);
    $thumb->thumbnailImage(50, null);
    $thumb->writeImage($thumbFile);
    $thumb->destroy();
}

Answer 4

考虑使用所有图像的精灵或拼贴，以便只加载一个较大的图像，从而节省带宽并减少页面加载时间。

另外，正如已经建议的那样，分页和异步加载可以改善它。

参考文献：

Answer 5

是，缓存缩略图是一个好主意，并且在正确完成后会很好。这种事情是horizontal scaling的好地方。

你应该考虑使用 CDN。（要么可能实现类似的东西。）缓存系统将生成常用请求大小的图像，然后将其关闭它们在以后很少被要求。
您也可以水平扩展并将此服务移植到另一台服务器或虚拟服务器在您的网络或云中。

这是一个磁盘密集型和带宽密集型的东西，图像传递。没有视频那么糟糕！

在图像密集型网页上加载速度

5 个答案: