I
I
Islam Ibakaev2017-07-06 23:04:16
JavaScript
Islam Ibakaev, 2017-07-06 23:04:16

How to correctly configure gulp-imagemin to satisfy the PageSpeed ​​Insights requirement?

the task for minifying images looks trite

const gulp = require('gulp');
const gulpLoadPlugins = require('gulp-load-plugins');
const $ = gulpLoadPlugins();
...
...

...
gulp.task('images', () => {
  return gulp.src('src/images/**/*')
    .pipe($.cache($.imagemin({verbose: true})))
    .pipe(gulp.dest('dist/images'));
});
...

image before minification - 172363 bytes
after minification - 152844 bytes
however, PageSpeed ​​Insights still requires image optimization and when I download the archive with images that they have optimized for me, there is one MANIFEST text file in this archive, which says There is no content that needs to be optimized for shopper.surge.sh/.
That is, on the one hand, they say "we optimized it as it should, take it and download it," and inside the message "they say you have already optimized it, what else do you need." Some kind of bullshit. What kind of joke is this anyway. But this is just thinking aloud)
The main question is - can you somehow configure gulp-imagemin in a more sophisticated way for maximum minification?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
S
Sergiu Mitu, 2017-07-07
@devellopah

Google just doesn't like the lossless option, give it optimization With loss of quality, alas... for these purposes I found for the same imagemin, the additions imageminJpegRecompress and imageminPngquant
after such a task:

// Таск для оптимизации изображений
gulp.task('img:prod', function () {
  return gulp.src(path.src.img) //Выберем наши картинки
    .pipe(debug({title: 'building img:', showFiles: true}))
    .pipe(plumber(plumberOptions))
    .pipe(gulp.dest(path.prod.img)) //Копируем изображения заранее, imagemin может пропустить парочку )
    .pipe(imagemin([
      imagemin.gifsicle({interlaced: true}),
      imageminJpegRecompress({
        progressive: true,
        max: 80,
        min: 70
      }),
      imageminPngquant({quality: '80'}),
      imagemin.svgo({plugins: [{removeViewBox: true}]})
    ]))
    .pipe(gulp.dest(path.prod.img)); //И бросим в prod отпимизированные изображения
});

google like everything

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question