카테고리 없음

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

핢이 2025. 2. 27. 18:40

이번 글에서는 Next.js의 Image 컴포넌트를 활용한 이미지 최적화 방법에 대해 정리해 보겠습니다. next/image는 이미지 로딩 성능을 최적화하고, 다양한 화면 크기에 맞춰 이미지를 자동으로 조정해 주는 기능을 제공합니다. 각 주요 속성들을 어떻게 활용할 수 있는지 살펴보겠습니다.

기본 사용법

next/image를 사용하여 이미지를 최적화하려면, 아래와 같은 형식으로 컴포넌트를 사용합니다.

import Image from 'next/image'

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

 

필수 속성

  1. src: 이미지의 경로입니다. 외부 URL 또는 내부 경로를 사용할 수 있습니다.
  2. width 및 height: 이미지의 원본 크기(픽셀 단위)를 지정합니다. 이 값들은 브라우저가 이미지의 비율을 계산하는 데 사용됩니다.
  3. alt: 이미지의 대체 텍스트로, 화면 리더와 검색 엔진에 도움이 됩니다.

선택적 속성

  • loader: 사용자 정의 이미지 로더를 사용하여 이미지 URL을 지정할 수 있습니다. 예를 들어, 외부 서버에서 이미지를 최적화할 때 유용합니다.
  • fill: true로 설정하면, 이미지가 부모 요소의 크기에 맞게 자동으로 채워집니다. 이 경우 부모 요소는 position: relative이어야 합니다.
  • sizes: 반응형 디자인을 고려해 이미지 크기를 지정할 수 있습니다. 화면 크기에 따라 다른 이미지 크기를 불러오게 도와줍니다.
  • quality: 이미지를 최적화할 때 품질을 1에서 100까지 설정할 수 있습니다. 기본값은 75입니다.
  • priority: 중요 이미지를 우선 로딩하도록 설정할 수 있습니다. 일반적으로 페이지의 주요 콘텐츠가 될 이미지를 설정합니다.
  • placeholder: 이미지가 로딩되는 동안 보여줄 대체 콘텐츠를 설정합니다. blur나 empty를 사용하여 로딩 시 깜빡임을 방지할 수 있습니다.

Next/Image 컴포넌트의 기능

Next/Image는 이미지 로딩 최적화와 성능 향상을 위해 제공하는 대표적인 기능은 다음과 같 3가지입니다.

  • Lazy Loading
  • 이미지 사이즈 최적화
  • Placeholder 제공

각 기능에 대해 어떤 이점이 있는지 정리해 보겠습니다.

lazy loading

lazy loading은 이미지 로드하는 시점을 필요할 때까지 지연시키는 기술을 의미합니다. 이 기술이 Next/Image를 사용하게 되면 자동으로 적용됩니다. 즉, 뷰포트(사용자가 보는 화면) 내에 있는 이미지만을 로드하여 성능을 최적화합니다. 사용자가 페이지를 스크롤하면, 해당 이미지가 뷰포트에 들어왔을 때 로딩됩니다. 이렇게 하면 불필요한 이미지 로딩을 피하고, 페이지 로딩 속도를 높일 수 있습니다.

 

물론 중요한 이미지 일부에 lazy loading을 적용하고 싶지 않은 경우에는 해당 기능을 끌 수도 있습니다. Image 컴포넌트의 priority라는 prop을 true로 설정하거나, loading prop에 “eager” 값을 설정하면 됩니다.

하지만, priorty 값을 설정하는 것이 더 권장되는 방식이라고 합니다.

priority={true} // {false} | {true}

이미지 사이즈 최적화

Next/Image는 디바이스 크기 별로 최적화된 이미지를 제공하는 기능을 지원합니다. 이를 위해 srcSet을 미리 지정해두고, 디바이스 화면 크기 및 해상도에 맞는 이미지 파일을 자동으로 선택해 로딩합니다.

 

또한, Next.js는 이미지를 webp와 같은 용량이 작은 포맷으로 이미지를 변환해서 제공합니다.

사용자의 디바이스에 맞는 이미지 사이즈를 만들고, 용량이 작은 webp 포맷으로 변환하는 작업은 이미지에 대한 최초 요청 시에 Next.js 서버에서 진행됩니다. 이후 요청에는 캐시가 만료될 때까지 캐시 된 이미지가 제공되기 때문에 첫 번째 요청보다 훨씬 빠르게 이미지를 서빙할 수 있습니다. 캐시가 만료된 후 요청이 들어오면 오래된 이미지를 우선 제공하고, 백그라운드에서 이미지 최적화를 다시 진행합니다.

이미지가 캐싱 되는 기간은 next.config.js의 images.minimumCacheTTL 구성 또는 CDN에서 응답한 이미지의 Cache-Control 헤더 중 더 큰 것으로 정의됩니다.

placeholder 제공

어떤 웹 사이트에 방문했을 때 이미지가 로드되기 전까지 영역의 높이가 0이었다가 이미지가 로드된 후 이미지만큼 영역이 늘어서 레이아웃이 흔들리는 현상을 CLS(Cumulative Layout Shift)라고 부른다고 합니다.

 

Next/Image는 레이아웃이 흔들리는 현상을 방지하기 위해 placeholder를 제공합니다.

이미지가 로드되기 전에도 이미지 높이만큼 영역을 표시해서 이미지가 로드된 후에 레이아웃이 흔들리지 않도록 하는 것이죠. placeholder는 빈 영역 또는 blur 이미지로 적용할 수도 있고, 커스텀 하게 설정할 수도 있습니다.

 

 

 

이처럼 Next/Image 컴포넌트는 웹사이트에서 이미지 로딩 최적화를 자동으로 처리하여 성능을 개선하고, 사용자 경험을 향상시킬 수 있는 중요한 도구입니다. 

 

이미지 로드는 웹사이트의 사용자 경험에 중요한 영향을 미칩니다. 느리게 로딩되는 이미지는 사용자의 주의를 끌지 못하고, 페이지 로딩 시간이 길어지면서 이탈률을 높일 수 있습니다. 따라서 Next/Image 컴포넌트를 통해 lazy loading, 이미지 사이즈 최적화, placeholder 제공 등의 기능을 잘 활용하면, 페이지의 성능을 크게 향상시킬 수 있습니다. 이러한 기능들을 적절히 사용하여 빠르고, 안정적인 웹사이트를 구축하면, 사용자에게 더 나은 경험을 제공할 수 있겠죠? 

 

참고문헌

https://nextjs.org/docs/pages/api-reference/components/image

https://fe-developers.kakaoent.com/2022/220714-next-image/