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

Question

我显示图像如下：

 <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).

Answer 1

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

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

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

Answer 2

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

Answer 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 图像。 这使您的过程变得简单

响应图像断点生成器 v2.0