[Nextjs] Image 사용하기

Next.js Image 컴포넌트는 Next.js 애플리케이션에서 이미지를 관리하고 최적화하는 가장 간단하고 효율적인 방법입니다. 이미지 형식, 크기, 해상도를 자동으로 조정하여 페이지 로딩 속도를 향상시키고, SEO에 도움을 줄 수 있습니다.

왜 Next.js Image를 사용해야 할까요?

• 자동 최적화: 이미지 형식, 크기, 해상도를 사용자의 기기와 네트워크 환경에 맞춰 자동으로 조정합니다.
• 차세대 이미지 포맷 지원: AVIF, WebP 등 차세대 이미지 포맷을 지원하여 이미지 품질을 유지하면서 파일 크기를 줄일 수 있습니다.
• Lazy Loading: 필요한 이미지만 로드하여 초기 페이지 로딩 속도를 향상시킵니다.
• Next.js와의 완벽한 통합: Next.js의 이미지 경로를 자동으로 처리하고, Server-Side Rendering (SSR) 환경에서도 사용 가능합니다.
• SEO에 최적화: 이미지 alt 속성을 자동으로 추가하고, 이미지 Sitemap 생성을 지원합니다.

Next.js Image 사용 방법

import Image from 'next/image';

function MyImage() {
  return (
    <Image
      src="/images/my-image.jpg"
      alt="Picture of a cat"
      width={500}
      height={300}
    />
  );
}

• src: 이미지 파일의 경로를 지정합니다.
• alt: 이미지에 대한 설명을 제공합니다.
• width: 이미지의 너비를 지정합니다.
• height: 이미지의 높이를 지정합니다.

주요 기능 및 옵션

• Layout: 이미지를 부모 요소 내에서 어떻게 배치할지 설정합니다. (fill, fixed, responsive)
• Priority: 중요한 이미지를 먼저 로드합니다.
• Quality: 이미지 품질을 조절합니다.
• BlurDataURL: 이미지 로딩 전에 미리보기 이미지를 표시합니다.
• ObjectFit: 이미지가 부모 요소 안에 어떻게 맞춰질지 설정합니다.

고급 사용법

• 동적 이미지: JavaScript 변수를 사용하여 이미지 경로, 크기 등을 동적으로 설정할 수 있습니다.
• Custom Domain: 이미지를 다른 도메인에서 호스팅하는 경우 사용자 정의 도메인을 설정할 수 있습니다.
• Next.js Image API: 더욱 세밀한 이미지 최적화를 위해 Next.js Image API를 사용할 수 있습니다.

추가 팁

• 이미지 최적화 도구: 이미지 최적화 도구를 사용하여 이미지 파일 크기를 줄여 더욱 빠른 웹사이트를 구축할 수 있습니다.
• 웹폰트 최적화: 웹폰트 역시 페이지 로딩 속도에 영향을 미치므로 최적화하는 것이 좋습니다.
• 캐싱: 브라우저 캐싱을 활용하여 이미지 로딩 속도를 향상시킬 수 있습니다.

Next.js Image 컴포넌트의 다양한 예제

Next.js Image 컴포넌트는 이미지를 최적화하고 효율적으로 관리하는 데 매우 유용합니다. 위에서 기본적인 사용법을 살펴보았고, 이제 더 다양한 예시를 통해 컴포넌트의 활용 범위를 넓혀보겠습니다.

1. 레이아웃 조절하기

<Image
  src="/images/my-image.jpg"
  alt="Picture of a cat"
  width={500}
  height={300}
  layout="fill" // 부모 요소를 완전히 채움
  objectFit="cover" // 이미지를 잘라내면서 부모 요소를 채움
/>

• layout="fill": 이미지가 부모 요소의 크기를 완전히 채우도록 합니다.
• objectFit="cover": 이미지를 잘라내면서 부모 요소를 완전히 채우도록 합니다. contain은 이미지를 확대하지 않고 부모 요소 안에 맞추도록 합니다.

2. 이미지 우선순위 설정하기

<Image
  src="/images/important-image.jpg"
  alt="Important image"
  width={300}
  height={200}
  priority // 이미지를 우선적으로 로드
/>

• priority: 중요한 이미지를 먼저 로드하여 사용자 경험을 향상시킵니다.

3. 동적 이미지 경로 설정하기

import { useState } from 'react';
import Image from 'next/image';

function DynamicImage() {
  const [imageSrc, setImageSrc] = useState('/images/image1.jpg');

  const handleImageChange = () => {
    setImageSrc(imageSrc === '/images/image1.jpg' ? '/images/image2.jpg' : '/images/image1.jpg');
  };

  return (
    <div>
      <button onClick={handleImageChange}>이미지 변경</button>
      <Image
        src={imageSrc}
        alt="Dynamic image"
        width={300}
        height={200}
      />
    </div>
  );
}

• useState 훅을 사용하여 이미지 경로를 상태로 관리합니다.
• 버튼 클릭 시 이미지 경로를 변경하여 다른 이미지를 보여줍니다.

4. 이미지 로더 커스터마이징

import Image from 'next/image';

const myLoader = ({ src, width, quality }) => {
  return `https://my-image-cdn.com/${src}?w=${width}&q=${quality || 75}`;
};

function CustomLoaderImage() {
  return (
    <Image
      loader={myLoader}
      src="/images/my-image.jpg"
      alt="Picture of a cat"
      width={500}
      height={300}
    />
  );
}

• loader props를 사용하여 이미지 로딩 방식을 커스터마이징합니다.
• 위 예시에서는 https://my-image-cdn.com에서 이미지를 가져오고, width와 quality를 쿼리 파라미터로 전달합니다.

5. 이미지 서버리스 함수와 연동

import Image from 'next/image';

const myLoader = ({ src, width, quality }) => {
  return `https://api.example.com/images/${src}?w=${width}&q=${quality || 75}`;
};

function ServerlessImage() {
  return (
    <Image
      loader={myLoader}
      src="my-image.jpg"
      alt="Picture from serverless function"
      width={500}
      height={300}
    />
  );
}

• 이미지 처리를 서버리스 함수로 위임하여 동적인 이미지 생성이나 변환 등을 수행할 수 있습니다.

6. Next.js Image API 활용

import { Image } from 'next/image';

function CustomImage() {
  return (
    <Image
      src="/images/my-image.jpg"
      alt="Picture of a cat"
      width={500}
      height={300}
      unoptimized // 이미지 최적화 비활성화
    />
  );
}

• unoptimized prop을 사용하여 이미지 최적화를 비활성화하고, 직접 이미지 처리를 수행할 수 있습니다.

7. 이미지 지연 로딩 (Lazy Loading)

<Image
  src="/images/large-image.jpg"
  alt="Large image"
  width={1000}
  height={500}
/>

Next.js Image는 기본적으로 지연 로딩을 지원합니다. 화면에 보이지 않는 이미지는 로딩되지 않아 초기 페이지 로딩 속도를 향상시킵니다.

8. 이미지 지도 (Image Map)

<Image
  src="/images/image-map.jpg"
  alt="Image map"
  width={500}
  height={300}
  layout="fill"
  objectFit="cover"
  // ... 이미지 맵 관련 속성 설정
/>

• 이미지의 특정 영역을 클릭하면 다른 페이지로 이동하거나 특정 이벤트를 발생시키는 기능을 구현할 수 있습니다.

이미지 최적화를 위한 추가적인 팁

• webp 포맷 사용: webp 포맷은 jpg 또는 png 포맷에 비해 파일 크기가 작아 로딩 속도를 향상시킬 수 있습니다.
• 이미지 크기 조절: 필요한 크기보다 큰 이미지는 불필요한 트래픽을 발생시키므로 적절한 크기로 조절해야 합니다.
• 이미지 압축: 이미지 압축 도구를 사용하여 이미지 파일 크기를 줄일 수 있습니다.
• lazy loading 활용: 화면에 보이지 않는 이미지는 로딩하지 않도록 설정하여 초기 페이지 로딩 속도를 향상시킵니다.