How can I optimize all my images?

问题

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.

---

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.

---

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.

---

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