Next.js 이미지 최적화

Next.js 이미지 최적화 방법

Next.js는 이미지 최적화를 위해 다양한 기능을 제공합니다.
이미지 최적화를 통해 페이지 로딩 시간을 단축하고 사용자 경험을 향상시킬 수 있습니다.
이 글에서는 Next.js에서 이미지 최적화를 하는 모든 방법에 대해 자세히 설명하겠습니다.

1. Next.js Image 컴포넌트 사용하기

Next.js는 내장된 <Image> 컴포넌트를 제공하여 이미지 최적화를 쉽게 할 수 있습니다.
이 컴포넌트는 자동으로 필요한 해상도로 이미지를 최적화하고, 필요한 경우 브라우저에 맞춰 이미지를 크기 조정합니다.

import Image from "next/image";

const MyComponent = () => (
  <div>
    <Image
      src="/path/to/image.jpg"
      alt="설명"
      width={500}
      height={500}
      quality={75} // 이미지 품질 설정 (1-100)
    />
  </div>
);

2. 이미지 크기와 품질 조정

Next.js <Image> 컴포넌트는 width, height, quality 등의 속성을 사용하여 이미지를 최적화합니다.

• width와 height는 이미지의 고정 크기를 지정합니다.
• quality는 이미지의 품질을 설정합니다. (기본값: 75)

3. 이미지 로드 시기 조정 (Lazy Loading)

이미지를 lazy load하여 페이지 로딩 속도를 개선할 수 있습니다.
Next.js <Image> 컴포넌트는 기본적으로 lazy loading을 사용합니다.

<Image
  src="/path/to/image.jpg"
  alt="설명"
  width={500}
  height={500}
  loading="lazy" // lazy loading 사용
/>

4. 이미지 포맷 변경

Next.js는 이미지를 더 효율적으로 압축할 수 있는 현대적인 이미지 포맷으로 변환합니다.
예를 들어, WebP 포맷은 JPEG보다 더 작은 파일 크기를 제공하면서도 높은 품질을 유지합니다. Next.js는 자동으로 이를 처리합니다.

5. 외부 이미지 사용하기

외부 이미지도 최적화할 수 있습니다. next.config.js 파일을 수정하여 외부 이미지 도메인을 허용합니다.

// next.config.js
module.exports = {
  images: {
    domains: ["example.com"],
  },
};

그런 다음, 외부 이미지를 사용합니다.

<Image
  src="https://example.com/path/to/image.jpg"
  alt="설명"
  width={500}
  height={500}
/>

6. 이미지 레이아웃 설정

이미지 레이아웃을 설정하여 반응형 디자인을 구현할 수 있습니다. layout 속성을 사용하여 fill, fixed, intrinsic, responsive 등의 레이아웃 옵션을 지정합니다.

<Image
  src="/path/to/image.jpg"
  alt="설명"
  layout="responsive" // 반응형 레이아웃
  width={500}
  height={500}
/>

7. 최적화된 이미지 로더 설정

Next.js는 기본적으로 내부 이미지 로더를 사용하지만, 필요에 따라 커스텀 로더를 설정할 수 있습니다.

import Image from "next/image";

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

const MyComponent = () => (
  <Image
    loader={customLoader}
    src="path/to/image.jpg"
    alt="설명"
    width={500}
    height={500}
  />
);

8. 서버 사이드 렌더링 및 정적 사이트 생성

이미지를 서버 사이드 렌더링(SSR) 또는 정적 사이트 생성(SSG) 시 최적화할 수 있습니다.
Next.js는 페이지가 렌더링될 때 이미지를 최적화합니다.

9. 이미지 캐싱

Next.js는 이미지 최적화와 함께 자동으로 이미지 캐싱을 관리합니다.
이미지를 자주 변경하지 않는다면 캐싱을 통해 성능을 더욱 향상시킬 수 있습니다.

마무리

이러한 방법들을 통해 Next.js에서 이미지를 효과적으로 최적화할 수 있습니다!