[Next JS] 이미지 Asset 최적화

Next/Image를 이용한 이미지 최적화

Next.js에서는 이미지 성능을 최적화하기 위해 next/image 컴포넌트를 제공

• 이미지는 일반적인 웹사이트의 성능에 큰 영향을 미치기 때문에 최적화가 필수
• next/image 컴포넌트는 아래와 같은 자동 최적화 기능을 제공

Image 컴포넌트 자동 이미지 최적화 기능

• 크기 최적화: 각 기기에 맞는 크기의 이미지를 자동으로 제공하며, WebP 및 AVIF 같은 최신 이미지 형식을 사용
• 시각적 안정성: 이미지 로딩 중 화면이 흔들리거나 깨지지 않도록 레이아웃 안정성을 제공
• 자산 유연성: 원격 서버에 저장된 이미지도 크기 조정이 가능
• Lazy Loading 지원: 이미지는 뷰포트에 들어올 때 로드되어 페이지 속도를 높여줌

로컬 이미지 사용

기존 React 방식과 동일하게 파일 import 하고, <Image> 컴포넌트의 src에 전달

import Image from 'next/image'
import profilePic from './me.png'

export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Picture of the author"
      // width={500} 자동 제공
      // height={500} 자동 제공
      // blurDataURL="data:..." 자동 제공
      // placeholder="blur" // 로딩 중 블러업 옵션 
    />
  )
}

Next.js가 자동으로 적절한 사이즈로 이미지를 최적화

원격 이미지 사용

외부 URl을 통해 이미지를 사용할 때는, 추가적인 보안 설정 필요

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="<network-image>"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

원격 이미지 허용을 위한 설정(필수)

Next.js 프로젝트 루트의 next.config.js 파일에 허용할 이미지 URL 패턴을 추가

⚠️주의
만약 next.config.mjs 파일을 사용하는 경우,
package.json의 "type": "module" 설정 필요

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "fakestoreapi.com",
        pathname: "/**",
      },
    ],
    formats: ["image/avif", "image/webp"],
  },
};

module.exports = nextConfig;

이미지 최적화 원리

1. lazy loading(지연 로딩)

• 개념 : 뷰포트 내에 노출되는 이미지들만 로드
• next/image 컴포넌트를 사용하면 기본적으로 적용

2.이미지 사이즈 최적화

• next.js 서버가 이미지를 다운로드하여 압축 후 저장
• 최초 요청 시 Next.js 서버는 이미지를 WebP, AVIF 포맷 등 용량이 작은 형식으로 변환
• 이후 동일한 요청에는 캐시된 이미지를 사용