이미지 최적화: WebP/AVIF + lazy + srcset

| 포맷 | 압축률 | 호환성 | 적합 |
|---|---|---|---|
| JPEG | 기준 (100%) | 100% | 사진 (폴백) |
| PNG | 무손실 | 100% | 투명·아이콘 |
| WebP | 30% 작음 | 97% | 일반 사진 |
| AVIF | 50% 작음 | 92% | 최신 브라우저 |
| SVG | 벡터 | 100% | 아이콘·로고 |


→ AVIF → WebP → JPEG 순으로 폴백

import Image from 'next/image';

<Image
  src="/photo.jpg"
  alt="제품 사진"
  width={800}
  height={600}
  sizes="(max-width: 768px) 100vw, 50vw"
  quality={80}             // 기본 75
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,..."
  loading="lazy"           // 기본 (priority 외)
/>


// next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    minimumCacheTTL: 60 * 60 * 24 * 365,  // 1년
    remotePatterns: [
      { protocol: 'https', hostname: 'cdn.example.com' },
    ],
  },
};

<!-- 브라우저가 가장 적합한 크기 자동 선택 -->
<img
  src="/photo-800w.jpg"
  srcset="
    /photo-400w.jpg 400w,
    /photo-800w.jpg 800w,
    /photo-1600w.jpg 1600w,
    /photo-3200w.jpg 3200w
  "
  sizes="
    (max-width: 640px) 100vw,
    (max-width: 1024px) 50vw,
    33vw
  "
  alt=""
  loading="lazy"
/>


<!-- picture로 포맷 분기 -->
<picture>
  <source srcset="/photo.avif" type="image/avif" />
  <source srcset="/photo.webp" type="image/webp" />
  <img src="/photo.jpg" alt="" />
</picture>

import sharp from 'sharp';

// 업로드 → 다중 사이즈·포맷 자동 생성
async function processUpload(buffer: Buffer, key: string) {
  const sizes = [400, 800, 1600];
  const formats = ['avif', 'webp', 'jpeg'];

  for (const size of sizes) {
    for (const fmt of formats) {
      const output = await sharp(buffer)
        .resize(size, null, { fit: 'inside', withoutEnlargement: true })
        .toFormat(fmt as any, {
          quality: fmt === 'avif' ? 60 : fmt === 'webp' ? 75 : 80,
        })
        .toBuffer();

      await s3.send(new PutObjectCommand({
        Bucket: BUCKET,
        Key: `${key}-${size}.${fmt}`,
        Body: output,
        ContentType: `image/${fmt}`,
        CacheControl: 'public, max-age=31536000, immutable',
      }));
    }
  }
}

<!-- Native (97% 지원) -->
<img src="/photo.jpg" loading="lazy" decoding="async" alt="" />


<!-- IntersectionObserver fallback -->
<script>
if (!('loading' in HTMLImageElement.prototype)) {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(e => {
      if (e.isIntersecting) {
        const img = e.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });
  document.querySelectorAll('img[loading="lazy"]').forEach(img => {
    observer.observe(img);
  });
}
</script>

// plaiceholder로 빌드 타임 생성
import { getPlaiceholder } from 'plaiceholder';
import fs from 'fs/promises';

async function generateBlur(path: string) {
  const buffer = await fs.readFile(path);
  const { base64 } = await getPlaiceholder(buffer);
  return base64;  // data:image/jpeg;base64,...
}


// 또는 Sharp로 작은 LQIP (Low Quality Image Placeholder)
async function makeLQIP(buffer: Buffer) {
  const tiny = await sharp(buffer).resize(20).webp({ quality: 30 }).toBuffer();
  return `data:image/webp;base64,${tiny.toString('base64')}`;
}

// 이미지 업로드 → Cloudflare Images (자동 변환·CDN)
const formData = new FormData();
formData.append('file', file);

const res = await fetch(
  `https://api.cloudflare.com/client/v4/accounts/.../images/v1`,
  {
    method: 'POST',
    headers: { 'Authorization': `Bearer ${CF_API_TOKEN}` },
    body: formData,
  }
);


// 사용 — variant로 사이즈 지정
<img src="https://imagedelivery.net/.../photo-id/public" />
<img src="https://imagedelivery.net/.../photo-id/thumbnail" />
<img src="https://imagedelivery.net/.../photo-id/w=800" />


// 비용: $5/100K 이미지·월 + $1/100GB 전송