Как оптимизировать и максимально сжать изображения в 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 HTML для чекбокса или радио-кнопок CSS для…
Вариант 1 — с помощью JS меняем позицию фонового рисунка Вариант 2 — без JS…
Как получить нужный параметр из адреса страницы? Итак, у нас есть рекламная кампания, и при…
5 комментариев
Ответить
For compressing or resizing images I recommend you also https://jpegreducer.com
Не пробовали JPEGoptim и OptiPNG? пишут, что хорошо оптимизируют
Пробовал, оптимизируют хорошо, но не достаточно, до уровня tinypng не достает.
Еще достаточно важный пункт по SEO — это оптимизация и сжатие картинок на сайте. Вот интересная статья на эту тему: optipic.io/ru/blog/seo-optimizatsiya-izobrageniy
Привет. У меня по какой-то причине не работает сжатие, выдает ошибку. Можешь подсказать куда нужно вставить код? Вот файл сборки drive.google.com/drive/folders/1zT_vSCvBP4ehrzA_hLqtgC6jOIuREizp Она похожа на твою, но есть небольшие различия, например вместо images стоит img.