Какие знаешь форматы изображений?

Форматы изображений в веб-разработке

Для Node.js backend-разработчика важно понимать форматы изображений, их особенности, когда их использовать и как с ними работать.

Растровые форматы

JPEG (JPG)

Назначение: фотографии, сложные изображения с большим количеством цветов

Особенности:

• Сжатие с потерями
• Хороший размер файла
• Не поддерживает прозрачность
• Качество регулируется (0-100%)

const sharp = require('sharp');

// Оптимизация JPEG
await sharp('input.jpg')
  .jpeg({ quality: 80, progressive: true })
  .toFile('output.jpg');

PNG

Назначение: логотипы, скриншоты, графики, изображения с прозрачностью

Особенности:

• Сжатие без потерь
• Поддерживает прозрачность (альфа-канал)
• Больший размер файла, чем JPEG
• Не теряет качество при сжатии

// Оптимизация PNG
await sharp('input.png')
  .png({ compressionLevel: 9, quality: 80 })
  .toFile('output.png');

WebP

Назначение: современные браузеры, максимальная оптимизация

Особенности:

• Лучше всего сжимает изображения
• На 25-30% меньше, чем JPEG
• Поддерживает прозрачность
• Поддержка не во всех старых браузерах

// Конвертация в WebP
await sharp('input.jpg')
  .webp({ quality: 80 })
  .toFile('output.webp');

AVIF

Назначение: будущее веб-изображений

Особенности:

• Самое эффективное сжатие
• На 40-50% меньше, чем JPEG
• Поддержка растет
• Хороший выбор для новых проектов

await sharp('input.jpg')
  .avif({ quality: 60 })
  .toFile('output.avif');

Векторные форматы

SVG

Назначение: логотипы, иконки, графики

Особенности:

• Масштабируется без потери качества
• Текстовый формат (XML)
• Маленький размер для простых изображений
• Можно редактировать CSS и JavaScript

const svgContent = `
  <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="blue" />
  </svg>
`;

// Сохранение SVG
fs.writeFileSync('icon.svg', svgContent);

Работа с изображениями в Node.js

Библиотека Sharp

Самая популярная для обработки изображений:

const sharp = require('sharp');

// Изменение размера
await sharp('input.jpg')
  .resize(800, 600, { fit: 'cover' })
  .toFile('resized.jpg');

// Создание миниатюр
await sharp('input.jpg')
  .resize(200, 200, { fit: 'inside' })
  .toFile('thumb.jpg');

// Множественный формат
await sharp('input.jpg')
  .toFormat('webp')
  .toBuffer();

// Получение информации
const metadata = await sharp('input.jpg').metadata();
console.log(metadata.width, metadata.height);

Выбор формата

Для фотографий:

1. WebP (современные браузеры)
2. JPEG (fallback)
3. AVIF (если поддержка есть)

Для графики/логотипов:

1. SVG (если возможно)
2. PNG (если нужна растровая графика)
3. WebP (для оптимизации)

Для иконок:

1. SVG (идеально)
2. PNG (32x32 и менее)

Рекомендуемая стратегия обработки

const processImage = async (inputPath) => {
  const image = sharp(inputPath);
  const metadata = await image.metadata();
  
  // Создать несколько версий
  const formats = [
    { format: 'webp', quality: 80 },
    { format: 'jpeg', quality: 85 },
    { format: 'avif', quality: 65 }
  ];
  
  for (const { format, quality } of formats) {
    await image
      .resize(1200, 1200, { fit: 'inside', withoutEnlargement: true })
      [format]({ quality })
      .toFile(`output.${format}`);
  }
};

Выбор формата зависит от целей оптимизации, поддержки браузеров и требований к качеству. Modern подход — предоставлять несколько форматов через <picture> tag.