Next.js의 이미지 최적화

기본 사용법

Next.js에서는 이미지 최적화를 위해 next/image컴포넌트를 사용한다.

import Image from 'next/image'

<Image
  src="/images/profile.jpg"
  width={500}
  height={500}
  alt="프로필 이미지"
  quality={75}
/>

• src: 이미지 소스 URL
• width 및 height:
  • 필수 속석으로, 이미지의 원본 크기를 지정
  • 레이아웃 시프트 방지 및 적절한 공간 확보에 사용
  • 반응형 이미지 설정 방법
• alt: 접근성을 위한 대체 텍스트
• quality:
  • 선택적 속성으로, 1-100 사이의 값 지정(기본값 75)
  • WebP 등으로 변환 시 이미지 품질 조절에 사용

 

Next.js는 이 정보를 바탕으로 자동 WebP 변환, 레이지 로딩, 디바이스 크기에 맞는 이미지 제공 등의 최적화를 수행한다.

 

외부 이미지 사용

외부 이미지를 사용할 경우, next.config.mjs에 다음과 같이 설정해줘야만 해당 이미지 주소가 차단되지 않는다.

/** @type {import('next').NextConfig} */
const nextConfig = {

  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "shopping-phinf.pstatic.net",
      },
    ],
    formats: ["image/webp", "image/avif"],
  },
};

export default nextConfig;

• remotePatterns: 허용할 외부 이미지 소스의 패턴 지정
• formats: 지원할 이미지 포맷 설정 (WebP, AVIF 등)
  • 브라우저 지원 여부에 따라 자동으로 최적의 포맷 선택

 

domains에서 remotePatterns로의 변경

Next.js 13부터는 domains대신 더 세밀한 제어를 제공하는 remotePatters사용이 권장된다.

 

이미지 최적화 프로세스

1. 요청 시 최적화: 이미지는 첫 요청 시에만 최적화 되고 이후 캐시된다.
2. 포맷 변환: 브라우저 지원 시 WebP 또는 AVIF로 자동 변환한다.
3. 크기 조정: 다양한 디바이스 크기에 맞춰 자동으로 크기를 조정한다.
4. 품질 조절: quality 속성을 통해 압축 수준 조절이 가능하다.