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

Question

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

这些图像是通过PHP动态加载的，目前，我选择了预先保存这些图像的缩略图版本并进行加载。

但是，我担心的是，如果该站点有大量用户，这可能不是最佳解决方案：我基本上会将每个图像的重复数乘以用户上传的图像数。

我的问题是，对于这个问题是否有更好的解决方案？ 一种在不损害太多空间的情况下尽快加载页面的方法？

万分感谢。

Answer 1

加载包含大量图像的网页会很慢。 其原因是由于传输这些图像所需的带宽。

您有几种选择

1. 以平铺模式加载完整图像。 这些图像将是完整图像，只是调整大小以适合“缩略图”视图。 这样做的好处是您只保存1张图像，但是该图像是全尺寸的，因此加载时间很长。

2. 按照您说的那样加载缩略图。 这样做的好处是性能，但是您需要为每个图像存储两个副本。 另外，根据您处理缩略图创建的方式，您可能会要求用户上传图像的两个副本以提供自己的缩略图...这可能会发臭。

3. 加载缩略图，但在上传时动态生成缩略图。 您实际上是在磁盘上保留映像的两个副本，但是您是通过一些php映像修改API动态创建的。 这样可以更快地加载，但是仍然会占用磁盘空间。 它还最小化了提供缩略图的用户/管理要求。

4. 根据要求，按需加载缩略图。 这种方法需要进行一些测试，因为我从未尝试过。 基本上，您将调用php图像修改API（或将其更好地外包给本机解决方案！）来创建要使用的一次性（或缓存的）缩略图。 您可能会说“ OMG，这将花费很长时间！”。 我认为，如果您应用适当的缓存机制，那么这种方法实际上可能会有用，这样您就不会不断地重新创建相同的缩略图。 它将限制带宽，并且由于这里的限制因素是网络连接，因此它可能比仅发送完整图像更快（因为创建缩略图的限制因素现在是CPU /内存/硬盘）。

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

Answer 2

1. 动态生成大图像的缩略图。 （ 一些提示 ）
2. 异步加载图像（尝试JAIL ）
3. 分页
4. 缓存也是一种选择，但是从第二次加载站点开始就可以使用。

Answer 3

我认为是：

A.利用高速缓存（系统高速缓存，标头中的高速缓存，HTTP高速缓存..所有高速缓存）

B.不要一直产生Thumb

C.使用诸如Gearman或beanstalkd的Job Queing系统生成拇指，这样您就不必立即做

D.使用Imagick更有效

E.分页

F.仅在修改原始文件后，示例才会生成Thumb

$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

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

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

参考文献：

• http://css-tricks.com/css-sprites/
• http://en.wikipedia.org/wiki/Sprite_(computer_graphics)#Sprites_by_CSS

Answer 5

是的 ，缓存缩略图是个好主意，如果操作正确，效果会很好。 这种东西是水平缩放的好地方。

1. 您应该考虑使用CDN 。 （或者可能实现类似的东西。）缓存系统将生成通常要求的大小的图像，并在以后不经常请求时将其整理掉。
2. 您还可以水平扩展并将该服务移植到网络或云中的另一台服务器或虚拟服务器上。

它是磁盘密集型和带宽密集型的事物，即图像传递。 不如视频差！