Next.js는 Image 최적화를 어떻게 할까?

MinJae·2025년 2월 18일

목록 보기

2/12

HTTP_아카이브_이미지_리포트

웹 페이지에서 이미지는 큰 비중을 차지하며, HTTP 아카이브에 따르면 웹 페이지의 대략 58%가 이미지로 구성되어 있고 이미지의 용량도 다른 콘텐츠에 비해 월등히 높습니다.
따라서 이미지 최적화는 웹 성능을 향상시키는 핵심 요소입니다.

최적화되지 않은 이미지는 페이지 로딩을 느리게 하여 사용자 이탈률을 높이며, SEO에도 부정적인 영향을 미칠
수 있습니다.

Next.js는 이러한 문제를 해결하기 위해 강력한 이미지 최적화 기능을 제공하는 next/image 컴포넌트를 제공합니다. next/image의 이미지 최적화 원리에 대해서 알아보겠습니다.

next/image 최적화 기능

next/image 컴포넌트는 아래 기능들을 제공합니다.

최신 포맷으로 변환: WebP, AVIF 등 차세대 이미지 형식으로 자동 변환
이미지 크기 최적화: 디바이스 크기에 맞는 이미지 제공
Lazy Loading: 레이지 로딩 (Lazy Loading) 구현
Placeholder Blur: 블러 이미지 플레이스홀더 제공
CDN 최적화: Vercel 배포 시 자동으로 CDN을 활용한 최적화 수행

next/image는 클라이언트가 지원하는 최적의 포맷으로 타입을 결정하는데, 만약 formats 배열의 값을 모두 지원하지 않는다면 원본 포맷을 유지합니다.

// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    formats: ['image/avif', 'image/webp'], 
  },
}

export default nextConfig

next.config에서 options를 설정할 수 있으며 기본값은 image/webp 입니다.

최적화 되지 않는 이미지

동적으로 최적화를 해야 하므로 이미지 최적화가 필요 없는 SVG와 같은 vector 이미지, 그리고 GIF와 같은 상대적으로 복잡하고 최적화에 오래 걸리는 애니메이션 이미지의 경우에서는 코드 레벨에서 최적화를 진행하지 않고 바로 응답으로 내려주게 되어 있습니다.

GIF는이미지 최적화 과정을 건너뛰기 위해 unoptimized={true}를 권장합니다.

next/image에서 SVG를 사용하려면 unoptimized={true}를 반드시 적용해야 합니다.

next/image에서 unoptimized는 true인 경우, 품질, 크기 또는 형식을 변경하지 않고 원본 이미지를 그대로 제공합니다.

// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    formats: ['image/avif', 'image/webp'],
    dangerouslyAllowSVG: true, 
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;", 
  },
}

export default nextConfig