Как вы оптимизируете изображения в gulp?

Question

[Andrej Sharapov]

Собственно, сабж.

Не могу настроить таски для сжатия и конвертации изображений в webp формат. Нужна ваша помощь!

После чтения доков и просмотра примеров годовалой давности, настраивал таски как только мог, не помогает.

С дефолтовыми настройками изображения просто переносятся в папку, но не сжимаются. В инфе Вижл студии, размеры исходников и новых изображений одинаковы.

Пробовал различные комбинации, все бестолку.

Знаю, что бред, но сейчас таск выглядит так:

imagemin = require('gulp-imagemin'),
    imageminJpegtran = require('imagemin-jpegtran'),
    imageminOptipng = require('imagemin-optipng'),
    imageminWebp = require('imagemin-webp'),

    extReplace = require("gulp-ext-replace");

gulp.task('imagemin', () => {
    return gulp.src('build/src/**/*')
        .pipe(cache(imagemin([
            imagemin.jpegtran({progressive: true}),
            imagemin.optipng({optimizationLevel: 5}),
            {
                interlaced: true,
                progressive: true,
                use: [
                    imageminJpegtran({
                        progressive: true,
                        max: 80,
                        min: 70
                    }),
                    imageminOptipng({
                        optimizationLevel: 5,
                    }),
                    imageminWebp({
                        quality: 50
                    })
                ]
            }
        ])))
        .pipe(extReplace('.webp'))
        .pipe(gulp.dest('src/new'))
});

Уже не знаю, что делать -__-.

Comments

[Сергей Горностаев]

Какая вам разница как это делаю я или другой имярек? Тем более, что мы можем делать это неправильно. Если вас интересует как правильно настроить таски для сжатия и конвертации изображений в webp формат, то именно это и спросите.

Answer 1

[eternalfire]

Привет!
Если посмотреть на проблему с другой стороны, то может помочь nginx, который будет ресайзить и кешировать изображения на лету, при обращении к изображению с, допустим, query параметрами
Для этого можно доустановить ngx_http_image_filter_module и ngx_http_proxy_module

Замечу, делает он это очень быстро)