Next.js 15 / Image Component

개요

Next.js의 장점이 '간편한 라우팅'과, '이미지 및 폰트 최적화'라고 많이 들어봤을 것이다.

이미지 최적화 할 때, React랑은 다르게 `<Image>` 컴포넌트를 사용하는데, 어떻게 다른지 궁금하였다.

되게 많은 prop들이 있지만, 실제로 사용해본 것들 먼저 천천히 정리해보려 한다.

 

먼저, Image 컴포넌트에 대해 가볍게 설명하자면,

Image 컴포넌트는 HTML의 `<img>`를 확장하여 자동 이미지 최적화 기능을 제공한다.

원본 이미지를 직접 사용하는 것이 아니라, Next.js 서버를 거쳐서 최적화된 크기의 이미지를 전달한다.

 

Props

Prop	예시	타입	설명
src	src="/profile.png"	String	이미지 경로(필수)
alt	alt="저자 사진"	String	대체 텍스트(필수)
width	width={500}	Integer (px)	이미지 가로 픽셀값
height	height={500}	Integer (px)	이미지 세로 픽셀값
fill	fill={true}	Boolean	부모 요소 채우기
loader	loader={imageLoader}	Function	커스텀 로더 함수
sizes	sizes="(max-width:768px) 100vw, 33vw"	String	반응형 이미지 크기
quality	quality={80}	Integer (1-100)	이미지 품질 설정
priority	priority={true}	Boolean	우선 로딩
placeholder	placeholder="blur"	String	블러 등 플레이스홀더
style	style={{objectFit: "contain"}}	Object	인라인 CSS 스타일
onLoad	onLoad={event => done()}	Function	로드 완료 콜백
onError	onError={event => fail()}	Function	로드 실패 콜백
loading	loading="lazy"	String	로딩 방식
blurDataURL	blurDataURL="image/..."	String	블러 이미지 데이터
overrideSrc	overrideSrc="/seo.png"	String	src 직접 오버라이드

 

`src`

• 외부 URL은 remotePatterns 설정이 필요하다.
• 정적 import가 가능하다.

import profile from './profile.png'
 
export default function Page() {
  return <Image src={profile} />
}

 

`alt`

• 웹 접근성을 위한 스크린 리더가 읽을 수 있는 대체 텍스트이다.
• 단순 장식용 이미지라면 `alt=""`로 비워둔다.

 

`width` and `height`

• 이미지의 원본 크기를 의미하며, 단위는 px이다.
• 이미지의 실제 렌더링 사이즈를 결정하지 않는다.
• Next.js는 이 정보를 사용해 이미지 비율을 파악하여,
  이미지 로딩 시에 빈 공간을 미리 확보하고 레이아웃 시프트를 방지한다.
• 반드시 함께 지정해야 한다.
• 이미지가 정적으로 import 된 경우나 `fill` prop을 사용하는 경우에는 명시적으로 지정하지 않아도 된다.

[ 중요한 점 ]

• 만약 이미지가 원격 URL에서 오거나 동적으로 로드된다면, `width`와 `height`를 수동으로 지정한다.
• `fill` prop은 이미지가 부모 컨테이너의 크기에 맞춰 늘어나며,
  이 때는 부모 컨테이너에 `position: relative`등의 스타일이 필요하다.
• 브라우저는 `width`와 `height`를 보고 이미지 공간을 미리 설정하므로,
  명확한 크기를 설정하여 시각적 안정성을 확보하는 것이 좋다.

import Image from 'next/image'

// 정적 import한 이미지 예시
import profile from './profile.png'

export default function Page() {
  return (
    <Image
      src={profile}
      alt="프로필 사진"
      // width, height는 profile 객체에 자동 포함되어 있으므로 따로 지정 안 해도 됨
    />
  )
}

// 원격 이미지 예시 (width, height 직접 지정 필요)
export function RemoteImage() {
  return (
    <Image
      src="https://example.com/photo.jpg"
      alt="원격 이미지"
      width={800}
      height={600}
    />
  )
}

// fill을 사용하는 경우 (부모 요소에 position: relative 필요)
export function FillImage() {
  return (
    <div style={{ position: 'relative', width: '400px', height: '300px' }}>
      <Image
        src="/bg.jpg"
        alt="배경 이미지"
        fill
        style={{ objectFit: 'cover' }}
      />
    </div>
  )
}

 

`priority`

• `true`로 설정하면, 해당 이미지를 즉시 우선적으로 미리 로드하도록 브라우저에 지시한다.
• `priority={true}`인 이미지는 lazy loading이 비활성화되고, 페이지 초기 렌더링 시 빠르게 표시된다.
• 페이지에서 처음 화면에 보여지는 이미지에 사용하는 것이 좋다.
• 페이지의 Largest Contentful Paint(LCP) 요소에 해당하는 이미지에 지정하여 초기 로딩 성능을 개선한다.
• 중요한 주요 배너, 로고, 히어로 이미지 등 즉시 사용자에게 보여져야 하는 이미지에 적합하다.

 

만약 개발자도구에서 위와 같은 경고 문구가 떴다면,

해당 이미지 컴포넌트에 priority를 설정해주면 된다.

 

* Largest Contentful Paint(LCP)란?

LCP는 웹 페이지에서 사용자가 보는 화면(뷰포트) 안에 렌더링되는

가장 큰 콘텐츠 요소가 화면에 나타나는 시간을 측정하는 성능 지표이다.

주로 큰 이미지, 배너, 텍스트 블록 같은 페이지의 주요 콘텐츠가 얼마나 빨리 로드되고 표시되는지를 의미한다.

LCP는 사용자 경험 측면에서 매우 중요하고, SEO 순위에도 영향을 미치는 중요한 지표로 보고 있다.

뷰표트 밖에 있거나 사용자가 스크롤하기 전까지 보이지 않는 콘텐츠는 LCP에 포함되지 않는다.

 

`loading`

• `lazy`: 이미지를 뷰포트에 근접했을 때 로드한다.
• `eager`: 이미지를 즉시 로드한다. 주로 페이지 첫 화면에 보여지는 중요한 이미지에 쓰인다.