Как оптимизировать и максимально сжать изображения в GULP 4 с помощью gulp-imagemin

25.04.2019
TemplateMonster - лучшая коллекция шаблонов для CMS WordPress

В общем, перепробовал десятки разных плагинов и настроек, но .jpg совсем не оптимизировались, а иногда даже наоборот становились больше по весу, зато .png оптимизировались отлично.

Нашел при каких настройках файлы оптимизируются максимально.

Оптимизация и сжатие изображений .jpg и .png в GULP 4 с помощью gulp-imagemin

Устанавливаем необходимые пакеты:
gulp
gulp-imagemin
imagemin-jpeg-recompress

Подключаем на проект:

var gulp         = require('gulp'),
    imagemin     = require('gulp-imagemin'),
    imgCompress  = require('imagemin-jpeg-recompress');

Создаем задачу на оптимизацию изображений:

// Optimize images
gulp.task('img', function() {
  return gulp.src('app/images/**/*')
  .pipe(imagemin([
    imgCompress({
      loops: 4,
      min: 70,
      max: 80,
      quality: 'high' 
    }),
    imagemin.gifsicle(),
    imagemin.optipng(),
    imagemin.svgo()
  ]))
  .pipe(gulp.dest('dist/images'));
});

Сама задача выполняется внутри задачи 'build' для того, чтобы оптимизировать картинки только при создании уже готового билда на продакшен, но задачу 'img' можно и отдельно выполнить, чтобы проверить на сколько меняется вес файлов.

Главные параметры это:
min – минимальное качество изображения (по умолчанию 40), но опытным путем я подобрал 70, потому как даже при 60 качество было не очень, зато вес был идеальный.
max – максимальное качество изображения (по умолчанию 95), опытным путем подобрал 80, может вам подойдет и меньшее число.

Данные параметры так же важны, но не заметил особого эффекта
loops – количество попыток для оптимизации (по умолчанию 6).
quality – предустановка качества (по умолчанию medium), может быть low, medium, high и veryhigh, особой разницы не заметил, более важны min и max.

Как я проверял, какие параметры установить для оптимального сжатия изображений?

Я сжал картинки на сайте https://tinypng.com/ (Google Page Speed принимает картинки после tinypng.com на ура), и взял данные файлы как эталон. Затем пробовал разные настройки и подводил, чтобы изображения оптимизированные через gulp-imagemin были такими же по весу и качеству как и после tinypng.com. Например, при параметрах min: 40, max: 60 вес был почти в два раза меньше чем после tinypng.com, но страдало качество изображения, поэтому нужно смотреть и пробовать различные настройки под конкретный проект.

TemplateMonster - лучшая коллекция шаблонов для CMS WordPress

Полезная инфа:

Комментарии (3) к “Как оптимизировать и максимально сжать изображения в GULP 4 с помощью gulp-imagemin”

Оставить комментарий