Как указать формат изображения в коде?

Как указать формат изображения в коде

Указание формата изображения в коде — критическая практика для кросс-платформной совместимости, оптимизации и разработки.

1. Расширение файла (базовый подход)

const imagePath = "/images/profile.jpg";
const imageExtension = imagePath.split(".").pop(); // "jpg"

const isImageFormat = ["jpg", "jpeg", "png", "gif", "webp"].includes(imageExtension);

2. MIME-типы (правильный способ)

MIME-тип явно указывает формат для HTTP-заголовков и обработки:

const mimeTypes = {
  jpg: "image/jpeg",
  jpeg: "image/jpeg",
  png: "image/png",
  gif: "image/gif",
  webp: "image/webp",
  svg: "image/svg+xml",
  bmp: "image/bmp",
  ico: "image/x-icon"
};

function getMimeType(filename: string): string {
  const ext = filename.split(".").pop()?.toLowerCase();
  return mimeTypes[ext] || "image/jpeg";
}

3. Sharp для обработки изображений (Node.js)

import sharp from "sharp";

async function convertImage(inputPath: string, outputFormat: "jpeg" | "png" | "webp" | "avif") {
  const image = sharp(inputPath);
  
  switch(outputFormat) {
    case "webp":
      return image.webp({ quality: 80 });
    case "jpeg":
      return image.jpeg({ quality: 90, progressive: true });
    case "png":
      return image.png({ compressionLevel: 9 });
    case "avif":
      return image.avif({ quality: 80 });
  }
}

// Использование
const buffer = await convertImage("/path/to/image.jpg", "webp");
await buffer.toFile("/path/to/image.webp");

4. Определение формата из Buffer

import FileType from "file-type";

async function detectImageFormat(buffer: Buffer) {
  const fileType = await FileType.fromBuffer(buffer);
  console.log(fileType?.mime); // "image/jpeg"
  console.log(fileType?.ext);  // "jpg"
}

// Альтернатива с использованием magic bytes
function detectFormatByHeader(buffer: Buffer): string {
  const header = buffer.slice(0, 12);
  
  if (header[0] === 0xFF && header[1] === 0xD8) return "jpeg";
  if (buffer.toString("utf8", 0, 4) === "\x89PNG") return "png";
  if (buffer.toString("utf8", 0, 3) === "GIF") return "gif";
  if (buffer.toString("utf8", 0, 4) === "RIFF") return "webp";
  
  return "unknown";
}

5. Express middleware для указания формата

import { Request, Response, NextFunction } from "express";

function imageFormatMiddleware(req: Request, res: Response, next: NextFunction) {
  const acceptWebP = req.get("Accept")?.includes("image/webp");
  const fileName = req.path;
  
  // Автоматически выбираем формат
  if (acceptWebP && !fileName.includes(".webp")) {
    res.set("X-Preferred-Format", "webp");
  }
  
  next();
}

app.use(imageFormatMiddleware);

6. Обработка в маршрутах

app.get("/api/images/:id", async (req, res) => {
  const { id } = req.params;
  const format = req.query.format as "png" | "jpeg" | "webp" || "jpeg";
  
  const image = await getImageFromDB(id);
  const processed = await sharp(image.buffer)
    [format]({ quality: 85 })
    .toBuffer();
  
  res.set("Content-Type", mimeTypes[format]);
  res.send(processed);
});

7. Метаданные изображений

async function getImageMetadata(imagePath: string) {
  const metadata = await sharp(imagePath).metadata();
  
  return {
    format: metadata.format,        // "jpeg", "png", etc
    width: metadata.width,
    height: metadata.height,
    space: metadata.space,
    hasAlpha: metadata.hasAlpha,
    density: metadata.density
  };
}

Лучшие практики:

• Всегда используйте MIME-типы в HTTP-заголовках (Content-Type)
• Валидируйте формат как на стороне сервера, так и на клиенте
• Поддерживайте modern форматы: WebP, AVIF для оптимизации
• Сохраняйте исходный формат в метаданных БД
• Используйте библиотеки вроде Sharp для надёжной обработки