Image Component

 

 

Next.js의 Image 컴포넌트는 웹 애플리케이션에서 이미지를 최적화하여 성능을 향상시키는 데 중점을 둔 도구입니다. 이 컴포넌트를 사용하면 이미지 로드 성능을 개선하고, 사용자 경험을 향상시킬 수 있습니다.

 

주요 기능

1. 자동 크기 조정 (Automatic Resizing)
   • Image 컴포넌트는 지정된 width와 height 속성에 따라 이미지를 자동으로 크기 조정합니다.
   • layout="fill"을 사용하면 부모 요소의 크기에 맞게 이미지를 자동으로 채웁니다.
2. 레이아웃 모드 (Layout Modes)
   • intrinsic: 이미지의 원본 비율을 유지하면서 지정된 크기로 조정됩니다. 기본 값입니다.
   • fixed: 고정된 크기의 이미지를 표시합니다. width와 height 속성을 사용해야 합니다.
   • responsive: 이미지가 반응형으로 조정되어 부모 요소의 너비에 따라 크기가 변합니다.
   • fill: 이미지를 부모 요소의 크기에 맞게 채웁니다. 부모 요소가 position: relative, absolute, 또는 fixed 스타일을 가져야 합니다.
3. 자동 포맷 선택 (Automatic Format Selection)
   • 브라우저에 따라 최적의 이미지 형식을 자동으로 선택합니다. 예를 들어, WebP 형식을 지원하는 브라우저에서는 WebP 형식을 사용합니다.
4. 저화질 프레임 (Low-Quality Image Placeholders, LQIP)
   • placeholder="blur"를 사용하여 저화질 이미지를 표시하고, 원본 이미지가 로드되면 고화질 이미지로 교체합니다.
5. 기타 최적화 기능
   • 이미지의 크기를 적절하게 조정하여 불필요한 데이터를 줄이고 로드 속도를 높입니다.
   • 레이지 로딩 (Lazy Loading)을 통해 뷰포트에 들어오기 전까지 이미지를 로드하지 않습니다

 

사용법

기본 사용법

import Image from 'next/image'

function HomePage() {
  return (
    <div>
      <Image 
        src="/path/to/image.jpg" 
        alt="Description of the image" 
        width={500} 
        height={300} 
      />
    </div>
  )
}

export default HomePage

 

 

레이아웃 모드

import Image from 'next/image'

function HomePage() {
  return (
    <div style={{ position: 'relative', width: '100%', height: '300px' }}>
      <Image 
        src="/path/to/image.jpg" 
        alt="Description of the image" 
        layout="fill" 
        objectFit="cover" 
      />
    </div>
  )
}

export default HomePage

 

 

 

저화질 프레임

import Image from 'next/image'

function HomePage() {
  return (
    <div>
      <Image 
        src="/path/to/image.jpg" 
        alt="Description of the image" 
        width={500} 
        height={300} 
        placeholder="blur" 
        blurDataURL="/path/to/low-quality.jpg" 
      />
    </div>
  )
}

export default HomePage

 

 

반응형 이미지

import Image from 'next/image'

function HomePage() {
  return (
    <div>
      <Image 
        src="/path/to/image.jpg" 
        alt="Description of the image" 
        layout="responsive" 
        width={700} 
        height={475} 
      />
    </div>
  )
}

export default HomePage

 

 

 

주요 속성

• src: 이미지 소스 경로.
• alt: 이미지 대체 텍스트.
• width: 이미지 너비 (픽셀 단위).
• height: 이미지 높이 (픽셀 단위).
• layout: 이미지 레이아웃 (intrinsic, fixed, responsive, fill).
• objectFit: CSS object-fit 속성 (cover, contain 등).
• placeholder: blur로 설정하면 저화질 프레임을 사용.
• blurDataURL: 저화질 프레임의 데이터 URL.
• priority: true로 설정하면 페이지 로드 시 우선적으로 로드.

 

 

결론

Next.js의 Image 컴포넌트는 웹 애플리케이션에서 이미지를 효율적으로 로드하고 최적화된 성능을 제공하기 위한 강력한 도구입니다. 다양한 기능과 속성을 활용하여 사용자 경험을 향상시키고 웹 페이지의 로드 속도를 개선할 수 있습니다.