Google Pagespeed: How to satisfy the new image compression rules?

Question

We have several pages with good Pageseed-values - even those with 100/100. Since a few days however, Pagespeed claims across all sites (technically different, different servers) that our images could be more optimized.

Does anyone know what exactly has been changed by the algorithm? On the one with PS 100/100 (before), we use jpegoptim, so we really don't know how to optimize further. Images are uploaded by our application and then optimized.

Any insight would be appreciated. Is there a changelog for PS anywhere?

Answer 1

I see the same unsightly results for pages without any problem before, of course using responsive frameworks like ZURB Foundation with responsive images.

In the past I used:

find . -iname "*.jpg" -exec jpegoptim --strip-all -o -p {} \;

and got great results.

Jan 2017 solution: 85% quality should do the trick:

find . -iname "*.jpg" -exec jpegoptim --strip-all -m85 -o -p {} \;

Back to 100/100 on google page speed.

Here is a part of my gulp/npm deploy method for ZURB Foundation 6

// Copy images to the "dist" folder
// In production, the images are compressed
function images() {
  return gulp.src('src/assets/img/**/*')
    .pipe($.if(PRODUCTION, imagemin(
      [
        imagemin.gifsicle({interlaced: true}),
        imageminJpegoptim({
          max: 85,
          progressive: true
        }),
        imagemin.optipng({optimizationLevel: 5}),
        imagemin.svgo({plugins: [{cleanupIDs: false, removeEmptyAttrs: false, removeViewBox: false}]})
      ],
      {
      },
      {
        verbose: true
      }
    )))
    .pipe(gulp.dest(PATHS.dist + '/assets/img'));
}

You need to add the npm modules gulp-imagemin imagemin-jpegoptim

var imagemin = require('gulp-imagemin');
const imageminJpegoptim = require('imagemin-jpegoptim');

Answer 2

You may also notice the message: "Download optimized image, JavaScript, and CSS resources for this page." They've done the work for you if you're having trouble getting the optimization Google is expecting. Sometimes various tools can't get down as small as Google wants.

Answer 3

The latest recommendation from google is to use imagemagick convert:

convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg

with the specific example puzzle.jpg

convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg

using those same arguments on my own images I got the same results as the downloaded optimized JPG file.