2017-08-07 25 views
1

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

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

  1. 我有图像优化问题。我已经尝试过任何包 ,它们会执行“图像优化”,但在运行我的 优化代码后,我的源 控件中的图像不会发生任何更改。 为什么包不改变图像?
  2. 我在我的应用程序中使用不同尺寸的相同图像。 例如名为“image_1.png”的图像在主页中使用的尺寸为 120 * 60像素,并且其在另一页中使用的尺寸为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); 
     } 

上面的代码成功通过,并且在代码运行期间没有发生错误。但图像不会改变。

+0

是否真有什么理由来优化图像?你说你突然要做图像优化有没有什么具体原因? –

+0

是的,当然是我的谷歌速度在谷歌(https://developers.google.com/speed/pagespeed/insights/)我需要优化图像 –

+0

你在什么尺寸的图像服务?并且您在一页中提供100张图像而不使用任何分页或延迟加载?如果你的图像已经很小,那么这些图像就没有太多的优化工作要做,除非你提供的图像质量非常高。 –

回答

0

从你的问题我明白,你不需要优化,你需要“即时调整”服务。我会告诉你我是如何做到的。

  1. Download and install Intervention Image to Laravel

  2. Download and install Intervention Image CACHE to Laravel

下载缓存组件后不读它的机制的文档现在只是与作曲家安装

  • 开放路线/网页。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'); 
    
  • 然后在你的刀模板,你可以使用它像这样
  • <img src="{{route(resizer,[$photo,$ext,$width,$height])}}"/>

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

    P.S如果需要,您可以在响应之前对图像运行优化。 P.S1你必须进行其他检查,如果照片处理这是观念恰恰证明你如何能做到这

    +0

    非常感谢你的回复。我不得不说,我也正在使用图像干预软件包,而且我已经调整过所有图像的大小。但现在在谷歌pagespeed我有图像优化问题。(https://developers.google.com/speed/pagespeed/insights/)。我需要解决谷歌pagespeed问题。 –

    0

    图像优化不仅是关于图像大小调整之前就存在,有几个元素的影响图像文件大小:

    1. 图像质量 - 在大多数情况下,你可以在没有显著的视觉冲击力显著降低品质。考虑你的形象目的和观众,并使用图像内容,观众和目的可接受的最低质量。

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

    3. 图像元数据 - 默认情况下,图像中含有大量的由摄像机和图形应用程序存储的元数据,但这种数据是在传送图像完全不必要的。

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

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

    基本上,它可以基于图像内容和浏览器找到质量最好的压缩级别和最佳编码设置,并自动执行文件和质量之间的折衷决定。以 “品质=汽车” 参数

    • 优化图像质量:

      下面是我在做这

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

    这将减少文件大小没有任何明显的人眼劣化,并且不需要单独分析每个图像。

    • 优化图像格式与“fetch_format =自动参数:

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

    0

    您应该尝试https://piio.co,它会完成您需要从原始图像中自动执行的所有操作。

    整合非常简单,您只需将<img src="image.jpg" />更改为<img data-piio="image.jpg />并将JS库包含在HTML中。您不需要运行cron作业或任何其他功能来调整和压缩图像,Piio会自动为您做到这一点。

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

    文档在https://piio.co/docs