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

debugcn 发表于 Dev

卡里克

我显示的图像如下：

 <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：Serve scaled images”，例如：

以下图像已在 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).

卡洛斯·萨拉查

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

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

否则，您可以使用诸如干预之类的包，该包可让您根据需要操作图像，但这意味着在服务器端进行更多处理。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。