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图像。这使您的处理变得容易

Responsive Image Breakpoints Generator v2.0

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

3 个答案: