[Next.js] Image 컴포넌트

Image 컴포넌트

들어가며

• Next.js에서 기본으로 제공하는 Image 컴포넌트에 대해 정리해본다.

 

Image 컴포넌트

개념

• Next.js에서 다양한 퍼포먼스 기능과 편리한 설정을 지원하는 컴포넌트
• 이미지 컴포넌트를 이용하면 이미지 불러오기 작업을 최적화할 수 있다.
• 또한 이미지 크기 조정, 지연 로딩(Lazy Loading)을 지원하며, WebP와 같은 최신 이미지 형식이 자동으로 처리된다.
• 다양한 기기와 화면 크기에 맞게 이미지 크기를 유동적으로 조절할 수 있다.

 

사용 방법

기본 사용법

• @next/image@ 모듈을 불러와서 사용한다.

import Image from 'next/image';

export default function Home() {
  return (
    <div>
      <h1>Next.js Image Example</h1>
      <Image
        src="/path/to/image.jpg"
        alt="Example image" 
        width={500} 
        height={300} 
        layout="responsive"
      />
    </div>
  );
}

 

로컬 이미지 사용하기

• 이미지 컴포넌트에 이미지 소스(@src@)와 대체 텍스트(@alt@)는 필수로 지정해준다.
• 너비와 높이를 명시적으로 지정하면 레이아웃 변동이 발생하지 않는다.
• @priority@ 속성을 통해 상단의 중요한 이미지를 미리 로드할 수 있다.

import Image from 'next/image';
import mapsImg from '@/images/maps.jpg';

<div className="flex gap-x-4 mt-4">
  <div>
    <Image src={mapsImg} alt="maps" width={192} height={192} objectFit="cover" className="rounded" />
    <h2>Local Image</h2>
  </div>
</div>

 

원격 이미지 사용하기

• 원격 이미지를 사용할 때는 @next.config.mjs@ 파일에서 지원할 URL 패턴을 등록해야 한다.

 

./next.config.mjs

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        pathname: '/images/tours/**',
      },
    ],
  },
};

 

• 원격 이미지는 레이아웃 안정성을 위해 너비(@width@)와 높이(@height@) 속성을 필수로 지정해야 한다.

<Image
  src="https://example.com/images/tour.jpg"
  alt="tour"
  width={192}
  height={192}
  priority
  objectFit="cover"
  className="rounded"
/>

 

반응형 이미지 사용하기

• @fill@ 속성을 이용해 부모 요소에 맞게 이미지를 채운다.
• 부모 요소는 @position: relative@ 속성을 포함해야 하고, 고정된 높이를 갖아야 한다.
• @sizes@ 속성을 통해 화면 크기별로 적절한 이미지 크기를 제공하여 성능을 최적화할 수 있다.

<div className="relative h-48 mb-2">
  <Image
    src={tour.image}
    alt={tour.name}
    fill
    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
    objectFit="cover"
    className="rounded"
  />
</div>

 

기능

자동 크기 조정

• 이미지를 자동으로 필요에 따라 리사이징하여 다양한 뷰포트와 디바이스에 맞게 최적화된 이미지를 제공한다.

 

레이아웃 조정

• @fill@, @fixed@, @intrinsic@, @responsive@ 등의 레이아웃 옵션을 제공하여 이미지가 페이지 내에서 어떻게 배치될지 결정할 수 있다.

 

지연 로딩(Lazy Loading)

• 이미지가 화면에 보여질 때까지 로드하지 않아 페이지 로드 속도를 향상시킨다.

 

웹 최적화

• WebP와 같은 최신 이미지 포맷을 지원하여 더 작은 파일 크기로 고품질 이미지를 제공한다.

 

Placeholder

• 로딩 중인 이미지 대신, 블러 처리된 placeholder를 표시하여 시각적 경험을 개선한다.

 

사용 예

import Link from 'next/link';
import Image from 'next/image';

import logoImg from '@/assets/logo.png';
import classes from './main-header.module.css';

export default function MainHeader() {
  return (
    <header className={classes.header}>
      <Link className={classes.logo} href="/">
        <Image src={logoImg} alt="A plaate with food on it" />
        NextLevel Food
      </Link>

      <nav className={classes.nav}>
        <ul>
          <li>
            <Link href="/meals">Browse Meals</Link>
          </li>
          <li>
            <Link href="/community">Foodies Community</Link>
          </li>
        </ul>
      </nav>
    </header>
  );
}

 

참고 사이트

Components: <Image> | Next.js