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

В общем, перепробовал десятки разных плагинов и настроек, но .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, но страдало качество изображения, поэтому нужно смотреть и пробовать различные настройки под конкретный проект.

Бесконечный анимированный фон с эффектом параллакса

Бесконечный анимированный фон с эффектом параллакса создан на основе варианта 2 из этой статьи HTML…

Изменение внешнего вида чекбоксов и радио-кнопок с помощью CSS

Изменение внешнего вида для чекбокса с помощью CSS HTML для чекбокса или радио-кнопок CSS для…

Бесконечный фон с автопрокруткой

Вариант 1 — с помощью JS меняем позицию фонового рисунка Вариант 2 — без JS…

Как получить параметр из URL страницы

Как получить нужный параметр из адреса страницы? Итак, у нас есть рекламная кампания, и при…

5 комментариев

For compressing or resizing images I recommend you also https://jpegreducer.com

Не пробовали JPEGoptim и OptiPNG? пишут, что хорошо оптимизируют

Пробовал, оптимизируют хорошо, но не достаточно, до уровня tinypng не достает.

alexbeglov1989

Еще достаточно важный пункт по SEO — это оптимизация и сжатие картинок на сайте. Вот интересная статья на эту тему: optipic.io/ru/blog/seo-optimizatsiya-izobrageniy

Виталий

Привет. У меня по какой-то причине не работает сжатие, выдает ошибку. Можешь подсказать куда нужно вставить код? Вот файл сборки drive.google.com/drive/folders/1zT_vSCvBP4ehrzA_hLqtgC6jOIuREizp Она похожа на твою, но есть небольшие различия, например вместо images стоит img.

Ответить