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

Question

[Islam Ibakaev]

таск для минификации картинок выглядит банально

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 для максимальной минификации?

Answer 1

[Sergiu Mitu]

Гугл-у просто вариант 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 отпимизированные изображения
});

гугл-у все нравиться

Comments

[Олег Ободин]

imagemin.svgo({plugins: [{removeViewBox: true}]})
что делает эта строчка?

[Sergiu Mitu]

Олег Ободин, очевидное, в переводе removeviewBox = удалить viewBox

Answer 2

[Volodimir Babeshko]

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

Comments

[Islam Ibakaev]

ну у меня показывает загрузка контента за 1.7, секунд, полная - 3

[Volodimir Babeshko]

А какой вес страницы? Полная загрузка в три секунды это относительно много, особенно если это не shared хостинг и включён gzip на сервере и сайт не на вордпрессе

[Islam Ibakaev]

Konstantin Abaiev: когда заливаю на surge показывает два мегабайта