imagemin для автоматической оптимизации изображений

Настройка imagemin для автоматической оптимизации изображений

Преимущества использования imagemin

1. Автоматическая оптимизация

   • Сжатие происходит автоматически перед каждым коммитом
   • Не требует ручного вмешательства после настройки
   • Гарантирует, что все изображения в репозитории оптимизированы

2. Гибкая настройка

   • Поддержка различных форматов (PNG, JPEG, GIF, SVG)
   • Настраиваемый уровень сжатия
   • Возможность сохранения метаданных

3. Существенное уменьшение размера

   • Снижение веса изображений на 40-70% без заметной потери качества
   • Уменьшение времени загрузки страниц
   • Экономия трафика пользователей

4. Интеграция с рабочим процессом

   • Работает как часть процесса git
   • Легко встраивается в CI/CD пайплайны
   • Совместим с другими инструментами оптимизации

Установка

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

# Установка основных зависимостей
npm install --save-dev husky lint-staged imagemin

# Установка плагинов для разных форматов
npm install --save-dev imagemin-mozjpeg imagemin-pngquant imagemin-gifsicle imagemin-svgo

2. Инициализация husky:

# Инициализация husky
npx husky install

# Создание хука pre-commit
npx husky add .husky/pre-commit "npx lint-staged"

Настройка

1. Добавьте конфигурацию lint-staged в package.json:

{
  "lint-staged": {
    "*.{png,jpeg,jpg,gif}": ["imagemin-lint-staged"],
    "*.svg": ["imagemin-lint-staged"]
  }
}

2. Создайте файл конфигурации imagemin (.imageminrc.js):

module.exports = {
  plugins: [
    ["mozjpeg", { quality: 80 }],
    ["pngquant", { quality: [0.65, 0.8] }],
    ["gifsicle", { optimizationLevel: 3 }],
    ["svgo", {
      plugins: [
        {
          name: "preset-default",
          params: {
            overrides: {
              removeViewBox: false,
              removeUnknownsAndDefaults: false
            }
          }
        }
      ]
    }]
  ]
}

Использование

После настройки imagemin будет автоматически обрабатывать все изображения, которые вы добавляете в git:

# Добавить изображения в git
git add images/example.png

# При выполнении коммита изображения будут автоматически оптимизированы
git commit -m "Add optimized images"

Ручное использование

Вы также можете оптимизировать изображения вручную:

1. Создайте скрипт в package.json:

{
  "scripts": {
    "optimize-images": "imagemin 'images/**/*.{jpg,png,gif,svg}' --out-dir=optimized"
  }
}

2. Запустите оптимизацию:

npm run optimize-images

Мониторинг и отладка

1. Добавьте вывод информации о сжатии:

// .imageminrc.js
module.exports = {
  verbose: true,
  plugins: [
    // ... конфигурация плагинов
  ]
}

2. Проверка размера до и после сжатия:

# Установка пакета для анализа размера
npm install --save-dev image-size

# Добавьте скрипт в package.json
{
  "scripts": {
    "analyze-images": "node scripts/analyze-images.js"
  }
}