NextJS: 이미지 최적화

이미지 컴포넌트와 이미지 최적화

Next.js의 이미지 컴포넌트인 next/image는 모던 웹을 위해 진화한 HTML <img> 엘리먼트의 확장판입니다. 이 컴포넌트는 좋은 Core Web Vitals을 달성하기 위해 여러 내장 성능 최적화 기능을 포함하고 있습니다. 이 점수는 웹사이트에서의 사용자 경험에 대한 중요한 측정 항목이며, 구글 검색 순위에 반영됩니다.

next/image에 내장된 최적화 기능 중 일부는 다음과 같습니다.

• 개선된 성능: 모든 기기에 맞게 올바른 크기의 이미지를 제공하고 모던 이미지 포맷을 사용합니다.
• 시각적 안정성: 누적 레이아웃 시프트를 자동으로 방지합니다.
• 더 빠른 페이지 로드: 이미지는 뷰포트에 진입할 때만 로드되며, 선택적인 블러업 플레이스홀더를 사용할 수 있습니다.
• 리소스 유연성: 원격 서버에 저장된 이미지도 필요한 크기로 On-demand 이미지 크기 조정이 가능합니다.

Image Component 사용하기

이미지를 추가하려면 next/image 컴포넌트를 import합니다.

import Image from 'next/image'

이제 이미지의 src를 정의할 수 있습니다(로컬 또는 원격).

로컬 이미지

로컬 이미지를 사용하려면 .jpg, .png 또는 .webp 파일을 import합니다.

import profilePic from '../public/me.png'

동적으로 import() 또는 require()를 사용할 수 없습니다. import는 정적이어야 하기 때문에 빌드 시간에 분석할 수 있어야 합니다.

Next.js는 가져온 파일을 기반으로 이미지의 너비와 높이를 자동으로 결정합니다. 이러한 값은 이미지가 로드되는 동안 Cumulative Layout Shift를 방지하는 데 사용됩니다.

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

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src={profilePic}
        alt="Picture of the author"
        // width={500} 자동으로 제공
        // height={500} 자동으로 제공
        // blurDataURL="data:..." 자동으로 제공
        // placeholder="blur" // 로딩 중 선택적인 blur-up
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

원격 이미지

원격 이미지를 사용하려면, src 속성은 상대적 또는 절대적인 URL 문자열이어야 합니다. Next.js는 빌드 프로세스에서 원격 파일에 액세스할 수 없기 때문에 width, height 및 선택적인 blurDataURL props를 수동으로 제공해야 합니다.

import Image from 'next/image'

export default function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src="/me.png"
        alt="Picture of the author"
        width={500}
        height={500}
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

이미지 크기 조정 요구 사항에 대해 더 알아보세요. (https://nextjs.org/docs/basic-features/image-optimization#image-sizing)

도메인

가끔 원격 이미지를 최적화하고 싶지만 내장된 Next.js 이미지 최적화 API를 사용하려는 경우가 있습니다. 이 경우 로더를 기본 설정으로 유지하고 Image src 속성에 절대 URL을 입력하면 됩니다.

악의적인 사용자로부터 응용 프로그램을 보호하기 위해 next/image 구성에서 사용할 원격 호스트 이름 목록을 정의해야 합니다.

원격 패턴 구성에 대해 더 알아보세요. (https://nextjs.org/docs/api-reference/next/image#remote-patterns)

로더

이전 예제에서 원격 이미지에 대해 부분 URL("/me.png")이 제공되는 것이 가능한 이유는 로더 아키텍처 때문입니다.

로더는 이미지 URL을 생성하는 함수입니다. 이는 제공된 src를 수정하고 다양한 크기로 이미지를 요청하기 위해 여러 URL을 생성합니다. 이러한 여러 URL은 자동 srcset 생성에 사용되어 방문자가 뷰포트 크기에 맞는 이미지를 제공받을 수 있습니다.

Next.js 응용 프로그램의 기본 로더는 내장된 이미지 최적화 API를 사용하여 웹의 모든 위치에서 이미지를 최적화한 다음 Next.js 웹 서버에서 직접 제공합니다. 이미지를 CDN이나 이미지 서버에서 직접 제공하려면 몇 줄의 JavaScript로 고유한 로더 함수를 작성할 수 있습니다.

로더 속성을 사용하여 이미지별로 로더를 정의하거나 로더 구성(https://nextjs.org/docs/api-reference/next/image#loader-configuration)에서 애플리케이션 수준에서 로더를 정의할 수 있습니다.

우선순위

각 페이지의 가장 큰 콘텐츠(대개 뷰포트 내에서 가장 큰 이미지 또는 텍스트 블록)를 대상으로 하는 이미지에 priority 속성을 추가해야 합니다.

이렇게 하면 Next.js가 로딩에 대해 특별히 우선순위를 부여할 수 있으며(preload 태그 또는 우선순위 힌트를 통해), LCP(Largest Contentful Paint)에 의미 있는 향상을 가져올 수 있습니다.

LCP 요소는 일반적으로 페이지의 뷰포트 내에서 가장 큰 이미지 또는 텍스트 블록입니다. next dev를 실행하면 우선순위 속성이 없는 <Image>인 경우 콘솔 경고가 표시됩니다.

LCP 이미지를 식별하면 다음과 같이 속성을 추가할 수 있습니다.

import Image from 'next/image'

export default function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src="/me.png"
        alt="Picture of the author"
        width={500}
        height={500}
        priority
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

next/image 컴포넌트 문서에서 우선순위에 대해 더 자세히 알아보세요. (https://nextjs.org/docs/api-reference/next/image#priority)

이미지 크기 조정

이미지가 가장 흔히 성능에 영향을 미치는 방식 중 하나는 레이아웃 이동입니다.

이미지가 로드되면 다른 요소를 밀어내며 페이지에서 이동하는 것입니다. 이 성능 문제는 레이아웃 시프트(Cumulative Layout Shift)라는 자체적인 Core Web Vital로 구성되어 사용자에게 매우 괴롭습니다.

이미지 기반의 레이아웃 이동을 피하려면 이미지 크기를 항상 조정해야 합니다. 이렇게 하면 브라우저가 이미지가 로드되기 전에 정확히 충분한 공간을 예약할 수 있습니다.

next/image는 항상 좋은 성능 결과를 보장하기 위해 이미지 기반의 레이아웃 이동에 기여하는 방식으로 사용할 수 없으며 다음 중 하나의 방식으로 크기를 조정해야 합니다.

• 정적 임포트를 사용하여 자동으로
• 너비와 높이 속성을 포함하여 명시적으로
• 부모 요소를 채우도록 하는 fill을 사용하여 암시적으로.

내 이미지의 사이즈를 알지 못하는 경우?

만약 이미지의 크기를 알지 못하는 소스에서 이미지를 가져와야 한다면, 다음과 같은 방법들이 있습니다:

fill 사용

fill 속성은 이미지가 부모 요소에 맞게 크기를 조정할 수 있도록 합니다. CSS를 사용하여 이미지의 부모 요소에 페이지 상에서 공간을 할당하고, sizes 속성을 사용하여 미디어 쿼리 브레이크 포인트와 일치하도록 크기를 지정할 수 있습니다. 또한, fill, contain 또는 cover와 object-position을 사용하여 이미지가 해당 공간을 차지하는 방식을 정의할 수 있습니다.

이미지를 표준화

이미지 크기를 정규화하는 이미지 파이프라인을 수정하여 이미지를 제어할 수 있다면, 서버에서 이미지를 크기별로 표준화하는 방법도 있습니다.

API 호출 수정

CMS와 같은 API 호출을 사용하여 이미지 URL을 가져오는 경우, API 호출을 수정하여 URL과 함께 이미지의 크기를 반환할 수 있습니다.

위에 제시된 방법 중 어떤 것도 이미지 크기를 조정하는 데에 도움이 되지 않는다면, next/image 컴포넌트는 표준 <img> 요소와 함께 페이지에서 잘 작동하도록 설계되었습니다.

Styling

이미지 컴포넌트를 스타일링하는 방법은 일반적인 <img> 요소를 스타일링하는 방법과 유사하지만, 몇 가지 지침 사항을 염두에 두어야 합니다:

className 또는 style을 사용하세요, styled-jsx는 사용하지 마세요

일반적으로, className 속성을 사용하는 것이 좋습니다. 이는 가져온 CSS 모듈, 글로벌 스타일시트 등이 될 수 있습니다.

인라인 스타일을 할당하기 위해 style 속성을 사용할 수도 있습니다.

styled-jsx는 현재 컴포넌트에 대해 스코프가 지정되어 있으므로 (스타일을 전역적으로 표시하지 않는 한), 사용할 수 없습니다.

fill을 사용할 때, 부모 요소는 position: relative여야 합니다.

이것은 해당 레이아웃 모드에서 이미지 요소가 올바르게 렌더링되기 위해서 필요합니다.

fill을 사용할 때, 부모 요소는 display: block을 가져야 합니다.

이것은 <div> 요소의 기본값이지만 그렇지 않은 경우 명시해주어야 합니다.

속성

next/image 컴포넌트에서 사용 가능한 모든 속성을 확인하려면 다음 링크를 참조하세요. (https://nextjs.org/docs/api-reference/next/image)

스타일링 예시

다양한 스타일과 함께 사용되는 Image 컴포넌트의 예시를 보려면 Image Component Demo 페이지를 참조하세요. (https://image-component.nextjs.gallery/)

Configuration

next/image 컴포넌트와 Next.js 이미지 최적화 API는 next.config.js 파일에서 구성할 수 있습니다. 이러한 구성을 사용하여 원격 이미지를 활성화하거나 사용자 정의 이미지 브레이크포인트를 정의하고, 캐싱 동작을 변경할 수 있습니다.

자세한 이미지 구성 문서를 읽어보세요. (https://nextjs.org/docs/api-reference/next/image#configuration-options)