Как грамотно настроить gulp-imagemin чтобы удовлетворить PageSpeed Insights требование?

таск для минификации картинок выглядит банально
const gulp = require('gulp');
const gulpLoadPlugins = require('gulp-load-plugins');
const $ = gulpLoadPlugins();
...
...


...
gulp.task('images', () => {
  return gulp.src('src/images/**/*')
    .pipe($.cache($.imagemin({verbose: true})))
    .pipe(gulp.dest('dist/images'));
});
...

картинка до минификации - 172363 bytes
после минификации - 152844 bytes

однако PageSpeed Insights всё ещё требует оптимизации картинок и когда скачиваю архив с картинками, которые они для меня оптимизировали, в этом архиве один файл текстовый MANIFEST, в котором написано There is no content that needs to be optimized for shopper.surge.sh/.

То есть с одной стороны они говорят "вот мол мы оптимизировали как надо, бери и качай", а внутри сообщение "мол ты и так уже оптимизировал, что же тебе ещё надо". Бредятина какая-то. Что это за приколы вообще. Но это просто мылси вслух)

Основной вопрос - может можно как-то поизощрённей настроить gulp-imagemin для максимальной минификации?
  • Вопрос задан
  • 6224 просмотра
Решения вопроса 1
EaGames
@EaGames
Front-end developer
Гугл-у просто вариант losless не нравится, ему подавай оптимизацию С потерей качества, увы... для этих целей нашел для того же imagemin, дополнения imageminJpegRecompress и imageminPngquant

после такого таска:
// Таск для оптимизации изображений
gulp.task('img:prod', function () {
	return gulp.src(path.src.img) //Выберем наши картинки
		.pipe(debug({title: 'building img:', showFiles: true}))
		.pipe(plumber(plumberOptions))
		.pipe(gulp.dest(path.prod.img)) //Копируем изображения заранее, imagemin может пропустить парочку )
		.pipe(imagemin([
			imagemin.gifsicle({interlaced: true}),
			imageminJpegRecompress({
				progressive: true,
				max: 80,
				min: 70
			}),
			imageminPngquant({quality: '80'}),
			imagemin.svgo({plugins: [{removeViewBox: true}]})
		]))
		.pipe(gulp.dest(path.prod.img)); //И бросим в prod отпимизированные изображения
});

гугл-у все нравиться
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@dady_KK
PM
Использовать сжатие с потерей качества (lossy) и использовать плагины для типов файлов, пример: pngquant для png. У imagemin есть к нему обёртка. Кроме этого, если это не хотелка заказчика или работодателя, то на это можно вполне забить. Ни Гугл, ни Яндекс не смотрят что у Вас с оптимизацией сайта: где расположены стили и скрипты, несколько минифицированы они и конкатенированы и насколько можно сжать картинки (если они уже сжаты) и никто кроме заказчиков и людей с завышенным ЧСВ на это не смотрит. Всем важна скорость загрузки сайта. Если скорость вполне приличная, то минификация на 30 килобайт увеличит скорость загрузки на 0,01%(утрируя), а если у Вас грузиться за 5+ секунд, то тут уж надо включать голову почему так, а не минифицировать картинки
Ответ написан
Ваш ответ на вопрос

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

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