EaGames
@EaGames
Front-end developer

Gulp-imagemin не достаточно хорош для Google PageSpeed Insights?

Использую такой такс для оптимизации изображений:
// Таск для оптимизации изображений
gulp.task('img:prod', function () {
	return gulp.src(path.src.img) //Выберем наши картинки
		.pipe(debug({title: 'building img:', showFiles: true}))
		.pipe(imagemin([
			imagemin.gifsicle({interlaced: true}),
			imagemin.jpegtran({progressive: true}),
			imagemin.optipng({optimizationLevel: 7}), //optimizationLevel - это кол-во проходов, диапазон 0-7
			imagemin.svgo({plugins: [{removeViewBox: true}]})
		]))
		.pipe(gulp.dest(path.prod.img)) //И бросим в prod
});

таск отрабатывается на ура, все изображения проходят оптимизацию, никаких ошибок. НО при проверке на всеми известном Google PageSpeed Insights выскакивает рекомендация (красным) "Оптимизируйте изображения" и список.. там 99% изображений выделены как неоптимизированные. что я делаю не так? ведь сам гугл рекомендует использовать optipng и jpegtran который и используется в Gulp-imagemin.
  • Вопрос задан
  • 1781 просмотр
Пригласить эксперта
Ответы на вопрос 1
Balya
@Balya
Люди и технологии
Используйте mozjpeg - он дает отличные результаты. Вот мой конфиг:

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());
});
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы