Gulp: Плагин "gulp-imagemin" | Web Мастерская

gulp-imagemin — это мощный плагин для Gulp, предназначенный для автоматической оптимизации изображений, уменьшая их размер без ощутимой потери качества. Он поддерживает множество форматов изображений, таких как JPEG, PNG, GIF и SVG, и позволяет значительно сократить размер файлов, улучшая производительность веб-сайта.

Основные возможности gulp-imagemin

Автоматическое сжатие изображений: уменьшается размер файлов за счет удаления ненужных метаданных и оптимизации внутренних данных.
Поддержка популярных форматов: оптимизирует изображения в форматах JPEG, PNG, GIF и SVG.
Простота интеграции: легко интегрируется в конвейер сборки Gulp.
Масштабируемость: может оптимизировать сотни изображений за один прогон.

Установка gulp-imagemin

Для начала нужно установить Gulp и сам плагин:

npm install --save-dev gulp gulp-imagemin

Пример использования

Пример простого Gulp-таска для оптимизации изображений:

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');

// Задача для оптимизации изображений
gulp.task('images', () =>
    gulp.src('src/images/**/*.{jpg,png,gif}')
        .pipe(imagemin([
            imagemin.jpegtran({progressive: true}), // оптимизация JPEG
            imagemin.optipng({optimizationLevel: 5}), // оптимизация PNG
            imagemin.svgo(), // оптимизация SVG
            imagemin.gifsicle({interlaced: true}) // оптимизация GIF
        ]))
        .pipe(gulp.dest('build/images'))
);

// Основной таск
gulp.task('default', gulp.series('images'));

Как это работает:

gulp.src: выбирает исходные изображения из папки src/images.
imagemin: оптимизирует изображения с помощью четырех утилит:
- jpegtran: оптимизирует JPEG-изображения.
- optipng: оптимизирует PNG-изображения.
- svgo: оптимизирует SVG-изображения.
- gifsicle: оптимизирует GIF-изображения.
gulp.dest: сохраняет оптимизированные изображения в папку build/images.

Дополнительные параметры:

Optimization Level: Уровень оптимизации для PNG. 0 — минимум, 7 — максимум.
Progressive JPEG: создает прогрессивные JPEG-изображения, которые загружаются поэтапно.
Interlacing: создаёт чередующиеся изображения, которые выглядят более гладкими при постепенной загрузке.

Оптимизация для production окружения

Для финальной сборки оптимизируйте изображения сильнее, добавив более жесткие настройки:

gulp.task('production-images', () =>
    gulp.src('src/images/**/*.{jpg,png,gif}')
        .pipe(imagemin([
            imagemin.mozjpeg({quality: 60}), // сильное сжатие JPEG
            imagemin.optipng({optimizationLevel: 7}), // максимальная оптимизация PNG
            imagemin.svgo(), // оптимизация SVG
            imagemin.gifsicle({optimizationLevel: 3}) // оптимизация GIF
        ]))
        .pipe(gulp.dest('dist/images'))
);

gulp-imagemin — это полезный инструмент для разработчиков, позволяющий легко оптимизировать изображения и повышать производительность веб-сайта. Используйте его в составе конвейера сборки Gulp, чтобы экономить место и улучшать впечатление пользователей от вашего сайта.