1

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 !

Community
  • 1
  • 1
code-8
  • 54,650
  • 106
  • 352
  • 604
  • instead of renaming all img references across your whole website, next time just rename your img folder to "img-src" and make imagemin output them in a new folder "img". – Hafenkranich Apr 03 '16 at 16:36
  • Hey, i was with the same issue and thats why i started this here: https://tinyimage.fun/ – Sascha Grindau Apr 19 '23 at 15:24

3 Answers3

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)

PNG (All Platforms)

tobijdc
  • 1,215
  • 1
  • 14
  • 21
1

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.

oschaaf
  • 281
  • 1
  • 7
0

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.

Hafenkranich
  • 1,696
  • 18
  • 32