Recode Log

Next.js Image 컴포넌트 가이드

Next.js Image Component (이미지 컴포넌트) 사용법, 사용 방법 및 반응형 이미지 등 Next.js Image 컴포넌트에 대한 내용을 알아보겠습니다.

Summary

Next.js에서 이미지를 사용할 때, Image 컴포넌트를 사용하면 성능을 최적화할 수 있습니다. 이번 포스트에서는 Next.js Image 컴포넌트 사용법에 대해서 알아보겠습니다.

목차

Next.js Image Component란?

Next.js Image 컴포넌트는 이미지를 최적화하고 성능을 향상시키는 컴포넌트입니다. Next.js Image 컴포넌트를 사용하면 이미지를 자동으로 최적화하고, 브라우저에 필요한 이미지 사이즈만큼만 로딩합니다.


Next.js Image Component 사용법

이미지 컴포넌트 기본 사용법

Next.js Image 컴포넌트를 사용하려면, 다음과 같이 Image 컴포넌트를 import하고 사용하면 됩니다.

components/MyComponent.tsx
import Image from 'next/image';
 
function MyComponent() {
  return (
    <Image src="/images/my-image.jpg" alt="My image" width={500} height={500} />
  );
}

이미지 컴포넌트는 어느 페이지에서든 사용할 수 있으며, 이미지 경로를 src 속성에 지정하고, 이미지의 가로, 세로 크기를 width, height 속성에 지정합니다.

width와 height, alt 속성은 필수 속성이며, 이미지의 가로, 세로 크기를 지정합니다. 이미지의 크기를 지정하지 않으면, 다음과 같이 경고 메시지가 출력됩니다.

Warning: Image with src "/images/my-image.jpg" is missing required "width" property.

import를 사용한 이미지 컴포넌트 사용법

이미지를 불러올때 /public 디렉토리를 사용하지 않고, import를 사용하여 이미지를 불러올 수 있습니다.

components/MyComponent.tsx
import Image from 'next/image';
import myImage from '../public/images/my-image.jpg';
 
function MyComponent() {
  return <Image src={myImage} alt="My image" />;
}

import를 사용하여 이미지를 불러오면, width와 height 속성을 지정하지 않아도 이미지의 크기를 자동으로 가져옵니다.

import로 이미지를 불러오면 객체 형식으로 이미지를 가져옵니다.

components/MyComponent.tsx
import Image from 'next/image';
import myImage from '../public/images/my-image.jpg';
 
function MyComponent() {
  console.log(myImage);
  // {  src: '/_next/static/media/my-image.6ad4479c.png', height: 600, width: 600, blurDataURL: '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-image.6ad4479c.png&w=8&q=70', blurWidth: 8, blurHeight: 8 }
  return <Image src={myImage} alt="My image" />;
}

import로 이미지를 불러오면, 이미지의 경로와 원본 이미지의 가로, 세로 크기, 블러 데이터 등의 정보를 가져올 수 있습니다.

이미지의 정보를 확인하려면, console.log를 사용하여 이미지 객체를 확인할 수 있습니다.

  • src: 이미지 경로
  • height: 원본 이미지의 세로 크기
  • width: 원본 이미지의 가로 크기
  • blurDataURL: 이미지의 블러 데이터 URL
  • blurWidth: 이미지의 블러 가로 크기
  • blurHeight: 이미지의 블러 세로 크기

import는 원본 이미지를 가져옵니다. width와 height 속성을 지정하여 이미지의 크기를 지정할 수 있습니다.

import를 사용하여 이미지를 불러올 때, <Image /> 컴포넌트 사용시 src를 사용하지 않습니다. src에는 이미지 객체를 전달합니다. 그러면 자동으로 이미지의 경로와 크기를 가져옵니다.

components/MyComponent.tsx
function MyComponent() {
  return <Image src={myImage} alt="My image" width={500} height={500} />;
}

로컬 이미지를 가져오는 방법 중 경로를 사용한 /public 디렉토리 방법과 import를 사용한 방법 중 어떤 방법을 사용해도 상관없습니다. 두 방법 모두 이미지를 불러오는 방법이며, 사용자의 편의에 따라 선택하면 됩니다.

개인적으로 선호하는 방법은 import를 사용한 방법입니다. import를 사용하면 이미지의 경로를 상대 경로로 사용할 수 있으며, 원본 이미지의 정보를 쉽게 확인할 수 있기 때문입니다.

단, 동적인 이미지를 사용할 때는 import를 사용할 수 없습니다. 동적인 이미지를 사용할 때는 절대경로를 사용하여 이미지를 불러와야 합니다.

components/MyComponent.tsx
function MyComponent() {
  return (
    <Image
      src="\`https://example.com/${myImage}\`" // `` 백틱 사용
      alt="My image"
      width={500}
      height={500}
    />
  );
}

이미지 컴포넌트 속성

Next.js Image 컴포넌트에는 다양한 속성이 있습니다. 이미지 컴포넌트의 속성을 사용하여 이미지를 최적화하고, 성능을 향상시킬 수 있습니다.

src: 이미지 경로 (필수)

이미지의 경로를 지정합니다. 이미지의 경로는 상대 경로 또는 절대 경로를 사용할 수 있습니다.

components/MyComponent.tsx
<Image src="/images/my-image.jpg" alt="My image" width={500} height={500} />

또는

components/MyComponent.tsx
import myImage from '../public/images/my-image.jpg';
 
<Image src={myImage} alt="My image" width={500} height={500} />;

alt: 대체 텍스트 (필수)

이미지의 대체 텍스트를 지정합니다. 이미지의 대체 텍스트는 이미지가 로딩되지 않았을 때, 대체 텍스트를 보여줍니다.

width: 가로 크기 (필수)

이미지의 가로 크기를 지정합니다. 이미지의 가로 크기를 지정하지 않으면, 경고 메시지가 출력됩니다.

height: 세로 크기 (필수)

이미지의 세로 크기를 지정합니다. 이미지의 세로 크기를 지정하지 않으면, 경고 메시지가 출력됩니다.

fill: 이미지 채우기

이미지를 채우는 방법을 지정합니다. true 또는 false 값을 사용할 수 있습니다. 기본값은 false 입니다.

fill속성을 추가하면 true로 설정되어 이미지를 채우는 방법을 지정할 수 있습니다.

  • true: 이미지를 채워서 보여줍니다.
  • false: 이미지를 원본 크기로 보여줍니다.
components/MyComponent.tsx
<Image
  src="/images/my-image.jpg"
  alt="My image"
  width={500}
  height={500}
  fill
/>

fill 속성은 기본적으로 position: absolute 속성을 사용하여 이미지를 채우는 방법을 지정합니다. 이로 인해 반드시 부모 요소에 position: relative 속성을 지정해야 합니다.

components/MyComponent.tsx
<div style={{ position: 'relative', width: '500px', height: '500px' }}>
  <Image
    src="/images/my-image.jpg"
    alt="My image"
    width={500}
    height={500}
    fill
  />
</div>

sizes: 이미지의 크기를 지정합니다.

sizes 속성을 사용하여 이미지의 크기를 지정할 수 있습니다.

components/MyComponent.tsx
<Image
  src="/images/my-image.jpg"
  alt="My image"
  width={500}
  height={500}
  sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, 33vw"
/>

sizes 속성은 미디어 쿼리를 사용하여 이미지의 크기를 지정할 수 있습니다. 미디어 쿼리를 사용하여 이미지의 크기를 지정하면, 뷰포트의 크기에 따라 이미지의 크기를 지정할 수 있습니다.


priority: 이미지 우선순위

<Image /> 컴포넌트는 기본적으로 이미지를 지연 로딩합니다.

html
<img loading="lazy" />

loading="lazy" 속성을 사용하여 이미지를 지연 로딩하며, 브라우저에 이미지가 보여질 때, 이미지를 로딩합니다.

MDN 공식문서 - `MDN Web Docs - img 요소의 loading 속성 1`

MDN 공식문서 - `MDN Web Docs - img 요소의 loading 속성 2`

priority 속성을 사용하면 loading="lazy" 속성을 사용하지 않고, fetchpriority="high" 속성을 사용하여 이미지를 우선적으로 로딩할 수 있습니다.

`MDN Web Docs - img 요소의 fetchpriority 속성`

이미지를 우선적으로 로딩하려면 priority 속성을 사용하여 이미지의 우선순위를 지정할 수 있습니다. true 또는 false 값을 사용할 수 있습니다. 기본값은 false 입니다.

  • true: 이미지를 우선적으로 로딩합니다.
  • false: 이미지를 일반적으로 로딩합니다.
components/MyComponent.tsx
<Image
  src="/images/my-image.jpg"
  alt="My image"
  width={500}
  height={500}
  priority
/>

placeholder: 이미지 플레이스홀더

이미지를 로딩할 때, 이미지의 플레이스홀더를 사용하여 이미지를 로딩할 수 있습니다.

placeholder 속성을 사용하여 이미지의 플레이스홀더를 지정할 수 있습니다.

components/MyComponent.tsx
<Image
  src="/images/my-image.jpg"
  alt="My image"
  width={500}
  height={500}
  placeholder="blur"
/>

placeholder 속성은 blur 값을 사용하여 이미지의 블러 데이터를 원본 이미지를 로드하기전 미리 용량이 적은 이미지를 로딩합니다. 원본 이미지가 완전히 로드 되면 블러 이미지를 원본 이미지로 교체합니다.

placeholder 속성은 empty 값을 사용하여 이미지를 로딩할 때, 빈 공간을 사용합니다. 레아아웃 공간을 차지하기 때문에 레이아웃이 흔들리지 않습니다. 다만, 공간만 차지하고 아무것도 보여주지 않습니다.

components/MyComponent.tsx
<Image
  src="/images/my-image.jpg"
  alt="My image"
  width={500}
  height={500}
  placeholder="empty"
/>

quality: 이미지 품질

이미지의 품질을 지정합니다. 이미지의 품질은 1에서 100까지 지정할 수 있습니다.

components/MyComponent.tsx
<Image
  src="/images/my-image.jpg"
  alt="My image"
  width={500}
  height={500}
  quality={100} // 1 ~ 100
/>

quality 속성을 사용하여 이미지의 품질을 지정할 수 있습니다. 이미지의 품질을 지정하면, 이미지의 용량을 줄일 수 있습니다.

이미지의 품질을 지정하지 않으면, 기본적으로 75로 설정됩니다.


loader: 이미지 로더

이미지 로더를 사용하여 이미지를 로딩할 수 있습니다.

components/MyComponent.tsx
function MyLoader({ src, width, quality }) {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`;
}
 
<Image
  src="/images/my-image.jpg"
  alt="My image"
  width={500}
  height={500}
  loader={MyLoader}
/>;

예를 들어 cloudinary를 사용하여 이미지를 로딩할 때, cloudinary의 이미지 URL을 사용하여 이미지를 로딩할 수 있습니다.

loader 속성을 사용하여 이미지 로더를 지정하면, 이미지 로더를 사용하여 이미지를 로딩할 수 있습니다.


loading: 이미지 로딩

이미지 로딩 방법을 지정합니다. lazy, eager 값을 사용할 수 있습니다.

components/MyComponent.tsx
<Image
  src="/images/my-image.jpg"
  alt="My image"
  width={500}
  height={500}
  loading="lazy" // lazy, eager (기본값: lazy)
/>

loading 속성을 사용하여 이미지 로딩 방법을 지정할 수 있습니다.

  • lazy: 이미지를 지연 로딩합니다.
  • eager: 이미지를 즉시 로딩합니다.

필요에 따라 loading 속성을 사용하여 이미지 로딩 방법을 지정하면, 이미지를 지연 로딩할지 즉시 로딩할지 지정할 수 있습니다.

eager 속성을 사용하여 이미지를 즉시 로딩하면, 이미지를 즉시 로딩합니다. 하지만 즉시 로딩하면, 페이지의 로드 속도가 느려질 수 있습니다.

lazy 속성을 사용하여 이미지를 지연 로딩하면, 이미지를 지연 로딩합니다. 페이지의 로드 속도가 빨라지지만, 이미지가 보여지는 시간이 늦어질 수 있습니다.

공식문서에서는 이미지 빠른 로드시 eager 보다 priority 속성을 사용하는 것을 권장합니다.


외부 이미지 사용법

Next.js에서 외부 이미지를 사용하려면 next.config.js 파일에 외부 도메인을 추가해야 합니다.

파일 이름은 next.config.js 또는 next.config.mjs 일 수 있습니다.

next.config.mjs
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '/account123/**',
      },
    ],
  },
};
 
export default nextConfig;

만약 next.config.js 파일을 사용하려면, module.exports를 사용하여 nextConfig를 내보내야 합니다.

next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '/account123/**',
      },
    ],
  },
};

remotePatterns에 외부 이미지의 도메인과 경로를 추가하면, 해당 도메인의 이미지를 사용할 수 있습니다.

  • protocol: 프로토콜 (http 또는 https)
  • hostname: 도메인 이름
  • port: 포트 번호
  • pathname: 이미지 경로

외부 이미지를 사용할 때, src 속성에 외부 이미지의 경로를 지정하면 됩니다.

components/MyComponent.tsx
import Image from 'next/image';
 
function MyComponent() {
  return (
    <Image src="https://example.com/account123/my-image.jpg" alt="My image" />
  );
}

remotePatterns의 속성들을 전체 사용하지 않아도 됩니다. 필요한 속성만 사용하여 외부 이미지를 사용할 수 있습니다.

간단하게 사용하기 위해 hostname 속성만 사용하여 외부 이미지를 사용할 수 있습니다.

next.config.mjs
const nextConfig = {
  images: {
    remotePatterns: [
      {
        hostname: 'example.com',
      },
    ],
  },
};

hostname 속성만 사용하여 외부 이미지의 도메인만 추가하면, 해당 도메인의 이미지를 사용할 수 있습니다.

components/MyComponent.tsx
import Image from 'next/image';
 
function MyComponent() {
  return <Image src="https://example.com/my-image.jpg" alt="My image" />;
}

외부 이미지를 사용할 때, remotePatterns에 외부 이미지의 도메인을 추가하면, 해당 도메인의 이미지를 사용할 수 있습니다.

이번 포스트에서는 Next.js Image 컴포넌트 사용법에 대해서 알아보았습니다. Next.js Image 컴포넌트를 사용하면 이미지를 최적화하고 성능을 향상시킬 수 있습니다.

이전글

Next.js prisma와 supabase 연동 기초 설정

다음글

Next.js와 nodemailer 이메일 파일전송 구현하는 방법 feat. server action

관련 태그