sharp 이미지 최적화 — 명령 하나로 웹 이미지 압축 자동화

# 설치

npm install sharp

# 또는
yarn add sharp
pnpm add sharp

# optimize.mjs - 기본 변환 스크립트

import sharp from 'sharp';
import path from 'path';

async function optimizeImage(inputPath) {
  const dir = path.dirname(inputPath);
  const name = path.basename(inputPath, path.extname(inputPath));

  // WebP 변환 (품질 80, 리사이즈 1920px)
  await sharp(inputPath)
    .resize({ width: 1920, withoutEnlargement: true })
    .webp({ quality: 80 })
    .toFile(path.join(dir, `${name}.webp`));

  // AVIF 변환 (품질 65, 더 높은 압축률)
  await sharp(inputPath)
    .resize({ width: 1920, withoutEnlargement: true })
    .avif({ quality: 65 })
    .toFile(path.join(dir, `${name}.avif`));

  console.log(`완료: ${name}`);
}

// 사용: node optimize.mjs ./images/photo.jpg
optimizeImage(process.argv[2]);

# 실행 결과 예시

$ node optimize.mjs ./public/images/hero.jpg

원본:    hero.jpg      2.4 MB
WebP:    hero.webp     320 KB  (87% 감소)
AVIF:    hero.avif     210 KB  (91% 감소)

# batch-optimize.mjs - 폴더 전체 배치 처리

import sharp from 'sharp';
import fs from 'fs';
import path from 'path';

const SUPPORTED = ['.jpg', '.jpeg', '.png', '.tiff'];

async function batchOptimize(inputDir, outputDir) {
  const files = fs.readdirSync(inputDir)
    .filter(f => SUPPORTED.includes(
      path.extname(f).toLowerCase()
    ));

  console.log(`${files.length}개 파일 처리 시작...`);
  fs.mkdirSync(outputDir, { recursive: true });

  let totalSaved = 0;
  for (const file of files) {
    const inputPath = path.join(inputDir, file);
    const name = path.basename(file, path.extname(file));
    const originalSize = fs.statSync(inputPath).size;

    await sharp(inputPath)
      .resize({ width: 1920, withoutEnlargement: true })
      .webp({ quality: 80 })
      .toFile(path.join(outputDir, `${name}.webp`));

    const newSize = fs.statSync(
      path.join(outputDir, `${name}.webp`)
    ).size;
    const saved = originalSize - newSize;
    totalSaved += saved;

    console.log(
      `  ${file} → ${name}.webp `
      + `(${(saved/1024).toFixed(0)}KB 절감)`
    );
  }

  console.log(
    `\n총 ${(totalSaved/1024/1024).toFixed(1)}MB 절감`
  );
}

batchOptimize('./public/images', './public/images/optimized');

# 용도별 설정 적용 예시

const profiles = {
  hero:      { width: 1920, webpQ: 85, avifQ: 70 },
  thumbnail: { width: 800,  webpQ: 80, avifQ: 65 },
  card:      { width: 600,  webpQ: 75, avifQ: 60 },
  icon:      { width: null, webpQ: 90, avifQ: 80 },
};

async function optimize(input, profile = 'thumbnail') {
  const { width, webpQ, avifQ } = profiles[profile];
  const pipeline = sharp(input);

  if (width) pipeline.resize({ width, withoutEnlargement: true });

  await pipeline.clone().webp({ quality: webpQ })
    .toFile(input.replace(/\.[^.]+$/, '.webp'));
  await pipeline.clone().avif({ quality: avifQ })
    .toFile(input.replace(/\.[^.]+$/, '.avif'));
}

# package.json에 스크립트 추가

{
  "scripts": {
    "optimize:images": "node scripts/batch-optimize.mjs",
    "prebuild": "npm run optimize:images",
    "build": "next build"
  }
}