laravel 应用中的图像优化

Question

我有一个 laravel 网络应用程序，其中包含数千张上传的图片。我之前没有优化我的图像，现在我必须进行优化。

现在我有两个关于图像优化的问题；

1. 图像优化有问题。我尝试过任何软件包 那会做“图像优化”，但在运行我的 优化代码，我的源代码中的图像不会有任何更改 控制。 为什么包不改变图片？
2. 我在我的应用程序中使用了不同尺寸的相同图像。 例如一个名为“image_1.png”的图像正在使用大小 120 * 60 pxs 在主页中，并且它正在另一个页面中使用 尺寸 300*150 像素。 我应该如何处理这些正在使用的图像 使用不同的尺寸进行优化？

我用过的包如下：

1. https://github.com/spatie/laravel-image-optimizer.git
2. https://github.com/psliwa/image-optimizer.git

我正在为数据库中的图像使用这样的代码：

 foreach ($files as $file) {
            $filePath = //the image path
            ImageOptimizer::optimize($filePath);
        }

以上代码成功通过，代码运行过程中没有出现错误。但图像不会改变。

Answer 1

图像优化不仅仅是图像大小的调整，还有几个因素会影响图像文件的大小：

1. 图像质量 - 在大多数情况下，您可以显着降低质量而不会产生明显的视觉影响。考虑您的图片目的和受众，并使用图片内容、受众和目的可接受的最低质量。

2. 图片格式 - 确保每张图片都以其图片内容的正确格式交付。利用 CDN 服务或其他工具/逻辑来检查哪个浏览器发出请求，并使用元素及其 srcset 属性为不同的浏览器提供不同的格式。

3. 图像元数据 - 默认情况下，图像包含大量由相机和图形应用程序存储的元数据，但这些数据在交付的图像中完全没有必要。

4. 图像大小和调整大小 - 即使在服务器端调整大小时，请记住，您可以裁剪以专注于重要内容，而不仅仅是缩小图像。 p>

在我的网页设计项目中，我将 Cloudinary 用于 image optimization。

基本上，它可以根据图像内容和浏览器找到最佳质量压缩级别和最佳编码设置，并自动在文件和质量之间做出权衡决策。

这是我的做法：

• 使用“quality = auto”参数优化图像质量：

  cl_image_tag("sample.jpg", array("quality"=>"auto"))

这将减小文件大小，而不会对人眼造成任何明显的影响，也无需单独分析每张图像。

• 使用“fetch_format = auto 参数优化图像格式：

cl_image_tag("sample.jpg", array("width"=>500, "fetch_format"=>"auto", "crop"=>"scale"))

这将缩小到 500 像素并以 JPEG 格式提供图像。

• 通过裁剪优化图像大小：

cl_image_tag("sample.jpg", array("transformation"=>array( array("aspect_ratio"=>"4:3", "crop"=>"fill"), array("width"=>"auto", "dpr"=>"auto", "crop"=>"scale") )))

Answer 2

根据您的问题，我了解到您不需要优化，您需要“即时调整大小”服务。我会告诉你我是怎么做的。

1. Download and install Intervention Image to Laravel

2. Download and install Intervention Image CACHE to Laravel

下载缓存组件后，暂时不要阅读它的文档，只需使用 composer 安装它

1. 打开 routes/web.php 并像这样创建新路由，您可以替换名称并修改它以满足您的需要

Route::get('resizer/{photo}/{ext}/{width}/{height}',function($photo, 
    $ext, $width,$height) {

    $image = new \Intervention\Image\ImageManager();
    $url = public_path('images/'.$photo.".".$ext); // If your photo is in public folder
    enter code here
    $res = $image->cache(function ($image) use ($url) {

        return $image->make($url)->resize($width, $height);
    }, 9999, true);

    return $res->response();

    })->name('resizer');

4. 然后在你的刀片模板中你可以像这样使用它

<img src="{{route(resizer,[$photo,$ext,$width,$height])}}"/>

该过程非常简单，您获取照片并将其传递给干预图像，然后将其缓存以获得更快的响应并将其作为具有正确标题的响应返回。如果你有任何问题问！祝你好运

P.S 如果需要，您可以在响应之前对图像进行优化。 P.S1 在处理之前，您必须额外检查照片是否存在这只是概念证明，您可以如何做到这一点