Оптимизация изображений без сторонних приложений с помощью Gulp 4

Мой репозиторий — https://github.com/DenisShapkun/images-optimization.

Используем вместо Tinypng десктопный вариант Gulp.

Пакетная оптимизация изображений формата PNG, JPEG, GIF, SVG.

PNG без альфа-канала (без прозрачности) лучше сначала пересохранить в JPEG.

Анимированные GIF файлы вызовут ошибку.

Клонируем проект

git clone git@github.com:DenisShapkun/images-optimization.git

Заходим в каталог проекта

cd images-optimization

Устанавливаем необходимые пакеты:

npm install

Положите изображения для сжатия в каталог app/images.

Чтобы изменить размер изображений (если нужно), задайте размеры в файле gulpfile.js и положите картинки в каталог app/images/original. Затем запустите команду

gulp resize

После этого получите изображения с новыми размерами в каталоге app/images/resized. Каталоги исходных файлов и обрезанных можно изменить в файле gulpfile.js. Но данный функционал еще не до конца протестирован и для него нужны сторонние модули, установленные глобально.

А вот функционал сжатия изображений протестирован вдоль и поперек. И я его использую почти каждый день для различных проектов.

Чтобы оптимизировать изображения просто запустите команду

gulp

или

gulp default

После этого вы получите оптимизированные сжатые картинки в каталоге dist/images.

Чтобы очистить кеш (если несколько раз сжимаете картинки с тем же именем)

gulp clear

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

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