Почему imagemin-pngquant не дает результат?

Question

[Василий Вязников]

Добрый день!

Использую для сжатия изображений gulp-imagemin. Как везде рекомендуется ставлю в дополнение к нему imagemin-pngquant. Но лучше от этого изображения сжиматься не стали. Не понимаю в чем дело.

Подключение библиотек:

var gulp = require('gulp'), //подключаем gulp
    ...
    imagemin = require('gulp-imagemin'), // Подключаем библиотеку для работы с изображениями
    pngquant = require('imagemin-pngquant'); // Подключаем библиотеку для работы с png

Такс:

gulp.task('imgmin', function() {
    return gulp.src('src/img/**/*')
        .pipe(imagemin({
            interlaced: true,
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        }))
        .pipe(gulp.dest('dist/img')); 
});

Comments

[sergey]

покажите вывод gulp

Answer 1

[Олег Смирнов]

Лучше поздно, чем никогда))
Используйте конструкцию imagemin([plugins], [options]), а опции прописывайте конкретно для каждого плагина.
Например:

gulp.task('images', function() {
    return gulp.src(src.images)
        .pipe(imageMin([
            pngquant(),
            mozjpeg({
                 progressive: true
            })
        ],{
            verbose: true
        }))
        .pipe(gulp.dest(outputDir + 'img'))
        .pipe(connect.reload())
});

Тыц

Comments

[Василий Вязников]

Большое спасибо!

[IIIu6ko]

Хельг Волков Спасибо за mozjpeg! Теперь всё работает нормально.

Вот так жмёт jpegtran, который встроен в gulp-imagemin


А вот так mozjpeg


В параметрах у обоих стояло только progressive: true

[Александр Серяков]

Спасибо за mozjpeg) и за скрины с демонстрацией)

Answer 2

[sergey]

Вот пример:

var gulp = require('gulp'),
    imageMin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant');

gulp.task('images', function() {
    return gulp.src(src.images)
        .pipe(imageMin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()],
            interlaced: true
        }))
        .pipe(gulp.dest(outputDir + 'img'))
        .pipe(connect.reload())
});

результат:
[11:32:31] Using gulpfile ~/Dropbox/Projects/Work2016/mars/gulpfile.js
[11:32:31] Starting 'images'...
[11:32:54] gulp-imagemin: Minified 89 images (saved 3.85 MB - 37.4%)
[11:32:54] Finished 'images' after 23 s

Comments

[Василий Вязников]

У меня по сути то же самое. Сжатие лучше не стало работать

[sergey]

Василий Вязников: а что вы подразумеваете лучше не стало работать?

[sergey]

Василий Вязников: вывод gulp в студию

[Василий Вязников]

Ошибок никаких нет. Я имею в виду, что imagemin-pngquant не улучшает сжатие png файлов. У меня что при его (imagemin-pngquant) использовании, что и без него сжатие одинаково

[sergey]

Василий Вязников: так он в принципе для работы с png

[sergey]

Василий Вязников: я не gulpfile просил, а вашу сборку командой gulp images

[Василий Вязников]

У меня в проект бОльшая часть изображений - png

[sergey]

Василий Вязников: https://www.npmjs.com/package/imagemin-pngquant вот здесь почитайте о его более детальной настройке, если хотите

[Василий Вязников]

Результат выполнения таска:
[11:53:17] Using gulpfile C:\open_server_temp\OpenServer\domains\Zalevskiy\gulpfile.js
[11:53:17] Starting 'images'...
[11:53:20] gulp-imagemin: Minified 13 images (saved 21.78 kB - 9%)
[11:53:20] Finished 'images' after 2.59 s

Про imagemin-pngquant я, разумеется, читал. Пробовал прописывать настройки, но толку нет. У меня получается так, что imagemin-pngquant не дает вообще никакого эффекта. Еще раз повторю, что если imagemin-pngquant не подключать и не использоваться, то сжатие останется прежним. Даже пробовал специально большие png картинки скармливать. Результата нет

[sergey]

Василий Вязников: вполне возможно, кстати ведь у вас могут быть уже заранее сжатые png изображения...

[Василий Вязников]

Я пробовал скармливать специально "раздутую" png картинку. И imagemin-pngquant вновь себя никак не проявил. Будто он вообще не участвует в сжатие.