[NEXT.JS] 이미지 최적화

소개

Next.js는 웹 성능 향상을 위해 이미지 최적화 기능을 제공합니다. 이 기능을 통해 이미지를 자동으로 최적화하고, 적절한 크기로 리사이즈하여 사용자에게 최상의 경험을 제공합니다. 다음은 Next.js의 이미지 최적화 기능에 대한 자세한 설명입니다.

 

 

이미지 컴포넌트 사용

Next.js의 Image 컴포넌트는 최적화된 이미지를 렌더링합니다. 기본적으로 이미지의 너비와 높이를 지정해야 하며, 이를 통해 이미지의 비율이 유지됩니다.

import Image from 'next/image';

const MyImage = () => (
  <Image 
    src="/me.png" 
    alt="Me" 
    width={500} 
    height={500} 
  />
);

export default MyImage;

 

 

레이즈와 레이아웃 설정

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

 

● Intrinsic Layout

<Image 
  src="/me.png" 
  alt="Me" 
  width={500} 
  height={500} 
  layout="intrinsic" 
/>

 

● Responsive Layout

<Image 
  src="/me.png" 
  alt="Me" 
  width={500} 
  height={500} 
  layout="responsive" 
/>

 

 

이미지 품질 설정

Next.js는 기본적으로 웹에서 최적화된 형식으로 이미지를 제공하며, 품질을 조정할 수 있습니다.

<Image 
  src="/me.png" 
  alt="Me" 
  width={500} 
  height={500} 
  quality={75} 
/>

 

 

이미지 로드 최적화

Next.js는 이미지가 뷰포트에 들어올 때까지 로드되지 않도록 하여 초기 페이지 로딩 시간을 줄입니다.

<Image 
  src="/me.png" 
  alt="Me" 
  width={500} 
  height={500} 
  priority 
/>

 

 

문의사항이나 피드백은 댓글로 남겨주세요.