[Next.js] 이미지 최적화

1. 이미지 최적화가 필요한 이유

일반적인 HTML에서는 이미지를 다음과 같이 추가한다.

<img
  src="/hero.png"
  alt="데스크톱 및 모바일 버전의 대시보드 프로젝트 스크린샷"
/>

그러나 이렇게 하면 다음을 수동으로 수행해야한다.

1. 이미지를 다양한 화면 크기에 반응적으로 표시
2. 다양한 기기에 대한 이미지 크기 지정
3. 이미지 로드 시 레이아웃 시프트 방지
4. 뷰포트 외부의 이미지 지연 로드

💡 이미지 최적화를 수동으로 구현하기보다는 next/image 컴포넌트를 사용하면 자동으로 최적화할 수 있다.

2. <Image> 컴포넌트

<Image> 컴포넌트는 HTML <img> 태그의 확장된 컴포넌트로, 다음과 같은 자동 이미지 최적화 기능을 제공한다.

1. 이미지가 로드될 때 자동으로 레이아웃 시프트 방지.
2. 뷰포트에 들어올 때 이미지 크기를 조절하여 작은 뷰포트 기기로 큰 이미지를 전송하지 않도록 함.
3. 기본적으로 이미지를 지연로드 (이미지가 뷰포트에 진입할 때 로드).
4. 브라우저가 지원하는 경우 WebP 및 AVIF와 같은 현대적인 포맷으로 이미지 제공.

3. 이미지 최적화하기

<Image> 컴포넌트를 사용하여 이미지를 최적화해보자

• Next.js는 이미지와 같은 정적 자산을 최상위 /public 폴더 아래에서 제공할 수 있다.
  
  

• 모바일 화면에서 이미지를 숨기기 위해 hidden 클래스를 사용하고, 데스크톱 화면에서 보이도록 md:block 클래스를 사용하였다.

import Image from "next/image";

const HomePage = () => {
  return (
    <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
      <Image
        src="/cat.jpg"
        alt="데스크톱 버전을 보여주는 고양이 사진"
        className="hidden md:block" // 데스크톱에서만 보이도록 설정
        width={1000}
        height={760}
      />
      <Image
        src="/cat.jpg"
        alt="모바일 버전을 보여주는 고양이 사진"
        className="hidden md:hidden" // 모바일에서 숨김
        width={560}
        height={620}
      />
    </div>
  );
};

export default HomePage;

• 데스크톱 (md 이상): 첫 번째 이미지가 보이고 두 번째 이미지는 숨겨진다.
• 모바일 (md 이하): 두 번째 이미지가 숨겨지므로, 어떤 이미지도 보이지 않게 된다.

참조

• https://nextjs.org/learn