Оптимизация изображений: конвертируйте и сжимайте PNG, JPG в WebP в Node.js

Цифровая эра привнесла изображения на передний план нашего просмотра веб-страниц. Однако проблема заключается в том, что эти изображения часто занимают большую полосу пропускания, что сказывается на производительности веб-сайта. Мы можем справиться с этим путем уменьшения размера изображений с помощью процесса, называемого оптимизацией изображений. В этой статье мы рассмотрим, как конвертировать файлы изображений, такие как PNG и JPG, в формат WebP и сжимать их с использованием Node.js.

# Почему выбрать WebP?

WebP - это современный формат изображений, разработанный Google, который обеспечивает сжатие изображений с потерями и без потерь для веб-изображений. Конвертируя файлы PNG и JPG в формат WebP, мы можем достичь меньших размеров файлов без ущерба для качества изображения, в конечном итоге ускоряя загрузку наших веб-сайтов.

# Настройка Node.js

Прежде чем мы начнем процесс конвертации, убедитесь, что у вас установлен Node.js. Если нет, скачайте и установите его в соответствии с вашей операционной системой.

# Установка необходимых модулей

Мы будем использовать два пакета npm: sharp для конвертации изображений и imagemin-webp для сжатия изображений.

npm install sharp imagemin imagemin-webp

# Конвертация изображений в WebP

Давайте воспользуемся модулем sharp для конвертации изображения в формате PNG или JPG в формат WebP. Это делается путем чтения входного файла и преобразования его в формат WebP.

const sharp = require('sharp');

sharp('input.png')
  .webp()
  .toFile('output.webp')
  .then(() => console.log('Преобразование изображения завершено.'))
  .catch(err => console.error(err));

# Сжатие изображений в формате WebP

Затем давайте сжимать преобразованное изображение в формате WebP с помощью модуля imagemin-webp.

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

(async () => {
  await imagemin(['output.webp'], {
    destination: 'compressed_images',
    plugins: [
      imageminWebp({quality: 50})
    ]
  });

  console.log('Сжатие изображения завершено.');
})();

# Полный код

const sharp = require('sharp');
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

sharp('input.png')
  .webp()
  .toFile('output.webp')
  .then(() => {
    (async () => {
      await imagemin(['output.webp'], {
        destination: 'compressed_images',
        plugins: [
          imageminWebp({quality: 50})
        ]
      });

      console.log('Преобразование и сжатие изображения завершены.');
    })();
  })
  .catch(err => console.error(err));

Этот полный скрипт преобразует ваше изображение в формат WebP и сжимает его.

# Вывод

Вот и всё: эффективный способ конвертировать и сжимать PNG и JPG в WebP с помощью Node.js. Теперь вы можете оптимизировать ваши изображения, ускорить время загрузки вашего веб-сайта и предоставить лучший пользовательский опыт. С небольшой практикой эти шаги станут привычными.

# Часто задаваемые вопросы

1. Почему я должен использовать WebP вместо PNG или JPG? WebP обеспечивает более эффективное сжатие, уменьшая размер файлов без значительной потери качества изображения.

2. Зачем сжимать изображения? Сжатие изображений позволяет уменьшить их размер, что может существенно улучшить время загрузки веб-сайта и сэкономить пропускную способность.

3. Могу ли я использовать другие языки программирования для этой задачи? Да, для конвертации и сжатия изображений также можно использовать другие языки программирования, такие как Python, Java и т.д. Однако этот учебник фокусируется на Node.js.

4. Что делать, если процесс конвертации или сжатия не удался? Убедитесь, что Node.js и все необходимые модули правильно установлены. Если проблема сохраняется, возможно, проблема связана с самим изображением.

5. Могу ли я настроить уровень сжатия? Да, плагин imagemin-webp позволяет настраивать параметр качества для управления уровнем сжатия.