如何在 Laravel 中提供缩放图像？答案

【问题标题】：How to serve scaled images in Laravel?如何在 Laravel 中提供缩放图像？
【发布时间】：2018-08-27 19:42:40
【问题描述】：

我显示的图像如下：

 <img class="card-img-top" style="max-height: 121px; 
 border:1px solid #eee;"
 src="{{ $post->image == null ? url('img/default.png') : url($post->image)}}

但在 pagespeed 分析中，对于某些图像，出现了“PageSpeed：提供缩放图像”的建议，例如：

以下图片在 HTML 或 CSS 中调整大小。提供缩放图像可以节省 353.7KiB（减少 90%）。

你知道如何解决这个问题吗？

https://....ngrok.io/uploads/posts/img1.png is resized in HTML or CSS from 800x400 to 251x119. Serving a scaled image could save 173.3KiB (90% reduction).
https://....ngrok.io/uploads/posts/img2.jpg is resized in HTML or CSS from 800x400 to 251x119. Serving a scaled image could save 40.2KiB (90% reduction).
https://....ngrok.io/uploads/posts/img3.jpg is resized in HTML or CSS from 800x400 to 251x119. Serving a scaled image could save 38.3KiB (90% reduction).
https://....ngrok.io/uploads/posts/img4.jpg is resized in HTML or CSS from 800x400 to 251x119. Serving a scaled image could save 31.6KiB (90% reduction).
https://...ngrok.io/uploads/posts/img5.jpg is resized in HTML or CSS from 800x400 to 251x119. Serving a scaled image could save 28.9KiB (90% reduction).
https://....ngrok.io/uploads/posts/img6.jpg is resized in HTML or CSS from 800x400 to 251x119. Serving a scaled image could save 28.0KiB (90% reduction).
https://....ngrok.io/uploads/posts/img7.jpg is resized in HTML or CSS from 800x400 to 251x119. Serving a scaled image could save 13.4KiB (90% reduction).

【问题讨论】：

标签： php laravel twitter-bootstrap

【解决方案1】：

这意味着您的服务器中必须有一个与您正在查看的容器大小相同的图像，例如移动设备上的图像的最大宽度应为425px

如果图像是静态的，您可以针对它在 pageSpeed 报告中显示的容器宽度创建每个图像。

否则你可以使用像intervention这样的包，这个包可以让你随心所欲地操作图像，但这意味着服务器端的处理更多。

【讨论】：

干预绝对是要走的路，当人们上传帖子图片时，如果这是您需要显示的最大图片，您应该将其调整为 250 像素宽。您还可以在filename.jpg 和filename-thumb.jpg 存储两份副本，以便双向使用。

【解决方案2】：

这意味着使用图像编辑器将图像大小调整为您需要的规格并将它们上传到您的网站，而不是使用 css 或 html 调整它们的大小。

【讨论】：

谢谢，你能解释一下使用图像编辑器吗？图片由用户使用输入类型文件插入，然后存储在 uploads/posts 文件夹中。
他的意思是像photoshop、illustrator等。

【解决方案3】：

我知道这个答案很晚，但为了您的信息，我会更新我的关于 Laravel 的回答。

我所做的是，当用户上传图片时，我会将其调整为不同的尺寸。当我上传一张图片时，我将其设置为 500 x 500 的图片。请参阅以下我用来调整图片大小的代码

if ( request () -> thumbnail )
    {
        $imageName = time () . '.' . request () -> thumbnail -> getClientOriginalExtension () ;

        $path =  ( 'uploads/products/' . $imageName ) ; 
        $path150 =  ( 'uploads/products/150x150/' . $imageName ) ;
        $path250 =  ( 'uploads/products/250x250/' . $imageName ) ; 
        Image::make ( request () -> thumbnail -> getRealPath () ) -> resize ( 150 , 150 ) -> save ( $path150 ) ;  //resize to 150px x 150px
        Image::make ( request () -> thumbnail -> getRealPath () ) -> resize ( 260 , 260 ) -> save ( $path250 ) ;//resize to 250px x 250px
        Image::make ( request () -> thumbnail -> getRealPath () ) -> resize ( 450 , 450 ) -> save ( $path ) ; // original image
        $product -> thumbnail_file_name = $imageName ;
    }

为了在不同的位置显示这些图像，我制作了一些帮助类来加载图像，如下所示

public function Image250X250()
{
    if ( $this -> thumbnail_file_name )
    {
        $file_path = 'uploads/products/250x250/' . $this -> thumbnail_file_name ;

        if ( File::exists ( $file_path ) )
        {
        return asset ( '/uploads/products/250x250/'  . $this -> thumbnail_file_name );
        }
    }

    return asset ( '/no-preview-250-250.jpg' ) ;
}

然后在视图中我调用这些函数来加载图像，如下所示

<div class="col-2">
<img src="{{ $variable -> Image150X150}}"
</div>

<div class="col-4">
<img src="{{ $variable -> Image250X250}}"
</div>

作为替代方案，您可以使用 srcset 。意味着这将根据您的视图宽度显示图像。在这里，您还必须制作不同类型的分辨率图像，然后按照以下代码将它们添加到视图中。

  <picture>
     <source media="(max-width: 575px)" srcset="{{asset('uploads/banners01.jpg')}}">
     <source media="(max-width: 768px)" srcset="{{asset('uploads/banners02.jpg')}}">
     <img class="d-block w-100  lazy img-fluid " height="349" width="960" src="{{asset('uploads/banners_def.jpg')}}" alt="xxxxxxxx">
  </picture>

检查此站点以使用其 html 代码生成 srcset 图像。这使您的过程变得简单

Responsive Image Breakpoints Generator v2.0

【讨论】：