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?

Solution 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');

Solution 2

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.

Solution 3

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.

Comments

[Goyllo]

Do you see that message on desktop test or in mobile test?

[merlin.metso]

both dropped...

[Stephen Ostermiller]

Not sure if it can do a better job, but Google is recommending using jpegtran for optimizing JPEG images. It also appears that Google is pushing a new image format called WebP that has smaller sizes, but poor browser support.

[DisgruntledGoat]

I've noticed this too. I know that WebPageTest uses 85% quality for JPGs as its baseline. But I can't get close to Google's recommended size unless I go under 80% quality.

[dan]

Welcome to the site. Just to clarify, are you stating you've also experienced the same notification about optimizing images whereas previously you didn't? If so, did the jpegoptim options you added help resolve that?

[merlin.metso]

we tried as well with different settings in jpegtran and jpegoptim, no way to achieve such small images like Google states being possible... Also, I don't think it has anything to do with image sizes (in pixels) because pagespeed clearly diversifies compression and pixel-size issues.

[Eaten by a Grue]

Thanks - this is really useful. And also you can do something similar for png find . -iname "*.png" -exec optipng -clobber -preserve -strip all -o2 {} \;

[user2875289]

Note that if you're using Windows, try magick if convert doesn't work for you. magick puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg. imagemagick.org/discourse-server/viewtopic.php?t=19679