Оптимизатор изображений gulp (gulp-imagemin) не полностью оптимизируется

Я использую gulp для компиляции своей работы. Недавно я использовал плагин gulp-imagemin для оптимизации изображений, и он работает, но все еще не полностью оптимизирован. В Google PageSpeed ​​Insights показано, что изображения не полностью оптимизированы. Как полностью оптимизировать мои изображения? Пожалуйста помоги. Это функция, которую я использую в своем gulpfile.js, и она уменьшает размер изображения примерно на 2-5%. Но не полностью оптимизирует.

gulp.task('imgs', function () {
    gulp
        .src(paths.assets.images)
        .pipe(imagemin({
            progressive: true,
            interlaced: true,
            pngquant: true
        }))
        .pipe(flatten())
        .pipe(gulp.dest(paths.build + "/img"));
});

Вот скриншот, на котором Google PageSpeed ​​Insights показывает неоптимизированные изображения. скриншот


gulp gulp-imagemin
person Swaranan Singha Barman    schedule 28.02.2017    source источник
comment
Что рекомендует ссылка Оптимизировать следующие изображения? Я знаю, что PageSpeed ​​часто рекомендует использовать WebP, и в этом случае gulp-imagemin вам не поможет.   -  person Sven Schoenung    schedule 28.02.2017

Ответы (3)


arrow_upward
0
arrow_downward

Используйте gulp-image с плагином imagemin jpegRecompress. Это дает гораздо лучший результат. Размер файла уменьшился более чем на 70%. Вам просто нужно позаботиться об обработке ошибок, потому что иногда команда не работает.

person Amit Chowdhury    schedule 27.12.2018

arrow_upward
1
arrow_downward

Я только что столкнулся с той же проблемой и решил перейти от стандартного плагина imagemin-jpegtran к плагину imageminMozjpeg.

Сначала вам нужно установить imagemin-mozjpeg:

npm install --save imagemin-mozjpeg

Затем добавьте эту строку в свой gulpfile.js:

var imageminMozjpeg = require('imagemin-mozjpeg');

И немного измените код, в который вы подключили инструмент imagemin.

.pipe(imagemin(
    [imageminMozjpeg()],
    {verbose: true}         // Enabling this will log info on every image passed to gulp-imagemin
))

Он также удаляет метаданные изображений. Результат потрясающий: журнал рабочего процесса gulp-imagemin

person Вано Шмидт    schedule 19.09.2017

arrow_upward
0
arrow_downward

Этот работает намного лучше..

gulp.task('imgs', function () {
    gulp
        .src(paths.assets.images)
        .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
        .pipe(flatten())
        .pipe(gulp.dest(paths.build + "/images"));
});
person Swaranan Singha Barman    schedule 20.04.2017