laravel应用程序中的图像优化

时间:2017-08-07 13:51:06

标签: php image optimization laravel-5

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

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

  1. 我的图像优化有问题。我试过任何包裹 这将进行'图像优化',但在运行我的 优化代码,我的源中的图像不会有任何更改 控制。 为什么包不会改变图像?
  2. 我在我的应用程序中使用不同大小的相同图像。 例如,名为“image_1.png”的图像正在使用大小 主页上有120 * 60像素,也在另一页中使用 尺寸300 * 150像素。 我应该为这些正在使用的图片做些什么 用于优化的不同尺寸?
  3. 我使用的

    包是:

    1. https://github.com/spatie/laravel-image-optimizer.git
    2. https://github.com/psliwa/image-optimizer.git
    3. 我在数据库中使用这样的代码作为我的图像:

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

      上面的代码成功通过,代码运行期间没有错误发生。但图像没有变化。

3 个答案:

答案 0 :(得分:0)

从您的问题我了解到您不需要优化,您需要“快速调整大小”服务。我会告诉你我是怎么做的。

  1. Download and install Intervention Image to Laravel

  2. Download and install Intervention Image CACHE to Laravel

  3. 下载缓存组件后,暂时不读取它的文档只需使用composer安装

    1. 打开routes / web.php并创建这样的新路线,您可以替换名称并根据需要进行修改
    2. 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');
      
      1. 然后在您的刀片模板中,您可以像这样使用它
      2. <img src="{{route(resizer,[$photo,$ext,$width,$height])}}"/>

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

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

答案 1 :(得分:0)

图像优化不仅仅是关于图像大小调整,还有一些影响图像文件大小的元素:

  1. 图像质量 - 在大多数情况下,您可以在不显着影响视力的情况下显着降低质量。考虑您的图像目的和受众,并使用图像内容,受众和目的可接受的最低质量。

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

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

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

  5. 在我的网页设计项目中,我使用Cloudinary作为image optimization

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

    以下是我的工作方式:

    • 使用&#34; quality = auto&#34;来优化图像质量参数:

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

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

    • 使用&#34; 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") )))

答案 2 :(得分:0)

您应该尝试https://piio.co,它会根据原始图片自动执行您需要执行的所有操作。

集成非常简单,您只需将<img src="image.jpg" />更改为<img data-piio="image.jpg />并在HTML中包含JS库。你不需要运行一个cron作业或任何东西来调整和压缩你的图像,Piio会自动为你做这件事。

图书馆还会根据用户设备自动调整每个屏幕尺寸的图像尺寸,因此您不必自己为同一图像生成多种格式。

文档位于https://piio.co/docs

相关问题