Imagemin not enough for google page speed insights?

Question

I am using gulp-imagemin for a while, but few months ago i noticed that google page speed unsatisfied by my compressed images. I tried all combinations of settings but without result. Also tried imagemin-cli and direct jpegtran - all the same, on large images it gives 2-5% compression and tinyfy gives 50%. When I use some cloud optimisers(tinify) it give right compression.

My current gulp task looks like:

gulp.task('imagemin', function() {
        return gulp.src(input_files)
            .pipe(newer(output_path))
            .pipe(imagemin([
                imagemin.gifsicle({interlaced: true}),
                imagemin.jpegtran({progressive: true}),
                imagemin.optipng({optimizationLevel: 7}),
                imagemin.svgo({plugins: [{removeViewBox: true}]})
            ],{verbose:true}).on('error', gutil.log))
            .pipe(gulp.dest(output_path));
});

score 2 · Answer 1 · answered May 22 '17 at 18:49

I solved it by using https://www.npmjs.com/package/imagemin-jpeg-recompress, which can be used in Gulp, too.

I'm using ES2015 and Gulp 4 in my case and the task callbacks reside in their own files, but you should get the idea by looking at my code:

'use strict';

import config from '../config';
import gulp from 'gulp';
import imagemin from 'gulp-imagemin';
import imageminJpegRecompress from 'imagemin-jpeg-recompress';

export default function() {
  return gulp.src([config.jekyll.imagedir + config.glob.deep.image])
    .pipe(imagemin([
      imagemin.gifsicle({interlaced: true}),
      imageminJpegRecompress({progressive: true, method: 'smallfry', quality: 'veryhigh'}),
      imagemin.optipng(),
      imagemin.svgo({plugins: [{cleanupIDs: false}]})
    ], {verbose: true}))
    .pipe(gulp.dest(config.jekyll.imagedir));
};

But be aware, that this means compressing the JPEG files with a lossy algorithm, whereas https://github.com/imagemin/imagemin-jpegtran (used in gulp-imagemin by default) only does lossless transformations.

I currently on mozjpeg and also pngquant shows better results — MadDocNC, May 22 '17 at 19:41
I tried mozjpeg, but it did not yield better results. But to be honest I didn't really try different configurations. May I ask what config you are using with it? — derbenni, May 22 '17 at 21:11

score 2 · Accepted Answer · answered May 23 '17 at 14:57

2

Best i could get (i suppose lossless):

const imageminMozJpeg = require(config.nm + 'imagemin-mozjpeg');
const imageminPngQuant = require(config.nm + 'imagemin-pngquant');
gulp.task('imagemin', function() {
    return gulp.src(input_files)
        .pipe(newer(output_path))
        .pipe(imagemin([
            imagemin.gifsicle({interlaced: true}),
            imageminMozJpeg(),
            imageminPngQuant({quality:'85-100'}),
            imagemin.svgo({plugins: [{removeViewBox: true}]})
        ]))
        .pipe(gulp.dest(output_path));
});

Google is still unhappy with responsive images, when real size is bigger then displayed size on some google page speed resolution=/

answered May 23 '17 at 14:57

MadDocNC

670
5
17

Did you try srcset? https://developer.mozilla.org/de/docs/Web/HTML/Element/img#Example_3_Using_the_srcset_attribute – moeses Jul 24 '17 at 12:39
Yes, but only for retina. I know that it is suitable for size breakpoints, but for now it's quite difficult for me to change workflow and make several images according to responsive rules(some images gets smaller, and some bigger whet screen width getting lower). So if there is something making it without manual resizing images it would be great. Please let me know if you have solution. – MadDocNC Aug 04 '17 at 11:18

Imagemin not enough for google page speed insights?

2 Answers2