How can I optimize all my images?

牧云@^-^@ 提交于 2020-04-30 07:34:30

问题


Diagnose

I recently came across : PageSpeed Insights, it basically test your page speed, spit out a score, and display what cause your page to slow-down.

I enter my url and here is my : result.

enter image description here


Issues

I clearly don't have a lot score, but I'm working on improving them.

I got a lot of image optimization problems. I've tried 2 things. __

1.Use ImageOptim Software

I've tried using ImageOptim Mac Software to optimize all my images in my img/ folder.


2.Use grunt imagemin plug-in

On top of that I , I use a build tool to re-compress all my images in my img/ folder, and store the compress one in dist/img/folder.

imagemin: {

    dynamic: {

        options: {
            optimizationLevel: 3,
            svgoPlugins: [{ removeViewBox: false }],
            use: [mozjpeg()]
        },

        files: [{
        expand: true,                         // Enable dynamic expansion
        cwd: 'img',                           // Src matches are relative to this path
        src: ['**/**/**/*.{png,jpg,gif,ico}'],         // Actual patterns to match
        dest: 'dist/img'                      // Destination path prefix
    }]
}

Imagemin Result

Luckily, I got all my 104 images reduce down 4.11MB.

enter image description here


Re-Test Result

But sadly, after re-linking my entire page to new images directory dist/img/. I test my site again with PageSpeed Insights, I still got the same warning image optimization.

enter image description here


How can I can fix/improve this problem ? Is it because I set the optimizationLevel: 3 too low ?

Any approach / idea / strategy / better solution / suggestion ?

Thanks a lot !


回答1:


I would recommend optimizing your images beforehand using one of these tools:

Windows

  • FileOptimizer It uses multiple tools to make your images as small as possible.

JPEG (All Platforms)

  • MozJPEG (by Mozilla)

PNG (All Platforms)

  • PNGQuant, especially the web fronted for it: TinyPNG (careful lossy!)



回答2:


You could consider using a PageSpeed server module. Those are able to automatically apply image optimization and thereby satisfy PageSpeed Insights recommendations. See https://developers.google.com/speed/pagespeed/module and https://developers.google.com/speed/pagespeed/module/faq#other-servers for availability.




回答3:


There is nothing wrong in using imagemin.

The problem is about css based resizing. If the natual img size is 150px and the css is squeezing it inside a 100px box, google wants you to resize the img to 100px.



来源:https://stackoverflow.com/questions/30332689/how-can-i-optimize-all-my-images

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!