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

Question

[Sergiu Mitu]

Использую такой такс для оптимизации изображений:

// Таск для оптимизации изображений
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.

Comments

[Ярослав Иванов]

Возможно изображение 100px x 100px а отображается через стили 50px x 50px
Гуголь это видет.

[Sergiu Mitu]

Ярослав Иванов: к сожалению нет, дело не в этом, проверил только что. но спасибо за подсказку.

[Ярослав Иванов]

Сергей: тогда Gulp-imagemin не отрабатывает как надо. Я делал себе в pagespeed 100/100. Изображение минимизировал через обычный онлайн сервис.

[Sergiu Mitu]

Ярослав Иванов: да это именно так, но почему? это никак не исправить? настройки может какие-есть?

[Ярослав Иванов]

Сергей: Искать какие-то другие плагины ) я пользуюсь облегченным галпом и если мне нужен рейтинг пейжспида то через онлайн сервис прогоняю. Пока надобности нет.

[Sergiu Mitu]

Ярослав Иванов: к сожалению не знаю никаких бесплатных онлайн сервисов которые могли бы ужать все как надо, особенно критично это сохранение структуры в папке img, там много под-папок.

[Ярослав Иванов]

Сергей:
https://www.npmjs.com/package/gulp-image-optimization
https://www.npmjs.com/package/gulp-image
Может это поможет

[Sergiu Mitu]

Ярослав Иванов: вообщем как я понял, гугл-у просто вариант losless не нравится, ему подавай оптимизацию С потерей качества, увы... для этих целей нашел для того же imagemin, дополнения imageminJpegRecompress и imageminPngquant

[Moskus]

И почему столько людей пытаются слепо верить тому, что выдает им PageSpeed? Он же абсолютно ничего не знает о том, на что ориентируется владелец контента - он просто предупреждает о том, что изображения, вероятно, стоит еще сжать. Если это не входит в ваши планы, то зачем пыжиться, чтобы угодить PageSpeed?
В действительности, для JPEG можно, например, усилить сжатие, но отключить chroma subsampling, или наоборот, использовать более грубые настройки chroma subsampling, но уменьшить сжатие. Это зависит от содержимого изображения и требует понимания того, что делаешь. А подгонка под формальный тест ни к чему хорошему не приводит.

[Sergiu Mitu]

Moskus: не могу с вами не согласится, но с заказчиком спорить бесполезно, хочу и все...

[GoodProject]

Да, изображения которые гугл сам оптимизирует в разы лучше сжаты, а через галп что то вообще оптимизации 0, через всякие там TIny png норм оптимизирует, но это не автоматизировано, найти бы норм плагин который под гугл прям оптимизирует что бы он не вякал))

[Volodimir Babeshko]

нужно сжимать ТОЛЬКО с потерей качества, гугл именно так и делает в пейдж спид. Gulp-imagemin отлично это умеет - Сергей уже посоветовал пнгквант и рекомпресс, от себя могу посоветовать tinypng или kraken, сжатие с потерей качества при не сильном сжатии дает превосходный вариант по весу и визуально хорошее качество, а вообще если делаете для себя то ориентироваться на "Уменьшите код на 15 байт, а то страница будет грузится долго" - это чистой воды маркетинг, равно как в win7 баллы производительности. Но если это заказчик и он этого не понимает, то сделаете просто сжатие с потерей качества и все, визуально он даже отличить не сможет lossy от lossless. Я даже больше скажу - оптимизация "на спичках" не даст никакого прироста в скорости из-за того что каналы у хостеров большие и скорости инета у клиентов не маленькие (даже с учетом мобильного инета) и гораздо больше влияние на загрузку оказывает наличие jquery и кучу js плагинов (я молчу про js движки и сетевые задержки и отсутствие СДН и даже настройка сервера (в частности кеширование статики и сжатие).

[Виолетта Морозова]

GoodProject: https://developers.google.com/speed/pagespeed/module/ У гугла есть свой модуль, который сам все что надо сделает, в зависимости от прописанных настроек.

Answer 1

[Александр Баля]

Используйте 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());
});