webp можно использовать gulp-webp. Он делает дополнительный файл с тем же именем, что и у исходного изображения, но в формате webp - очень удобно.<picture>, есть способ попроще с использованием .htaccess. Идея в том, чтобы подменять пути на уровне веб-сервера в зависимости от поддержки в браузере.
find ./ -name "*.jpg" -exec convert {} -quality 85 -resize 1920\>x1920\> {} \;find ./ -name "*.jpg" -exec jpegoptim --strip-all --all-progressive --max=82 --force '{}' \;find ./ -name "*.png" -exec optipng -o3 '{}' \;
mqpacker({
sort: true
})var gulp = require('gulp'),
chalk = require('chalk'),
plugin = require('gulp-load-plugins')(),
browserSync = require('browser-sync').create();
plugin.imagemin.mozjpeg = require('imagemin-mozjpeg');
plugin.imagemin.pngquant = require('imagemin-pngquant');
gulp.task('img', function () {
gulp.src(path.src.img)
.pipe(plugin.plumber({
errorHandler: plugin.notify.onError("Ошибка: <%= error.message %>")
}))
.on('end', function(){ plugin.util.log(chalk.cyan('Инициализирован обработчик ошибок изображений')); })
.pipe(plugin.imagemin([
plugin.imagemin.gifsicle({interlaced: true}),
plugin.imagemin.jpegtran({progressive: true}),
plugin.imagemin.mozjpeg({progressive: true}),
plugin.imagemin.optipng({optimizationLevel: 7}),
plugin.imagemin.pngquant({quality: '85-100'}),
plugin.imagemin.svgo({plugins: [{removeViewBox: true}]})
]))
.pipe(gulp.dest(path.build.img))
.on('end', function(){ plugin.util.log(chalk.cyan('Оптимизированы изображения')); })
.pipe(browserSync.stream());
});