img

Next.js는 최상위 폴더 아래에 이미지와 같은 정적 자산을 제공할 수 있다.
보통 이미지들은 /public 폴더 안에 저장한다.

우리가 줄곧 사용한 img

<img
  src="/hero.png"
  alt="Screenshots of the dashboard project showing desktop version"
/>

하지만 이렇게 하려면 아래 나와있는 것들을 수동으로 수행해야 한다.

• 다양한 화면 크키에서 이미지가 반응하는지 확인
• 다양한 장치에 맞게 이미지 크기를 지정
• 이미지가 로드될 때 레이아웃이 전환되는 것을 방지
• 사용자가 보지 않는 화면 밖의 이미지를 나중에 로드하기

이렇게 위의 사항들을 수동으로 이미지 최적화를 해야한다. 번거로우니 next/image요소를 사용하면, 자동으로 이미지를 최적화 할 수 있다.

Image 구성 요소

Component Image는 HTML img의 확장이며 , 다음과 같은 자동 이미지 최적화 기능을 제공한다.

• 이미지 로딩 시 레이아웃 이동 방지 : 이미지를 로드할 대 페이지 레이아웃이 이동하는 현상을 방지한다. 이를 위해 이미지의 width, height를 미리 지정해 두면, 이미지가 로드되기 전에 공간이 확보되어 레이아웃이 안정적이다.

• 뷰포트 크기에 맞춰 이미지 크기 조정: 작은 화면을 가진 장치(예:스마트폰)에는 큰 이미지를 전송하지 않고, 적절한 크기로 조정된 이미지를 전송한다.
  이렇게 하면 데이터 사용량을 줄이고 로딩 속도를 개선할 수 있다.

• 기본적으로 이미지 지연 로딩: 화면에 보이지 않는 이미지는 나중에 로드하고, 사용자가 스크롤하여 이미지를 보려고 할 때 로드한다.
  이렇게 하면 초기 페이지 로딩 속도가 빨라지고 불필요한 데이터의 사용을 줄일 수 있다.

• 브라우저가 지원하는 경우 최신 이미지 포멧 사용: 최신 이미지 포맷 WedP, AVLF는 기존 포맷(JPEG, PNG)보다 파일 크기가 작으면서, 품질이 좋다. 브라우저가 지원하는 경우 이러한 포맷을 사용하여 이미지 크기를 줄이고 로딩 속도를 개선한다.

사용방법

로컬이미지

import Image from "next/image";
import dummyImage from "/public/images/dummy-image-1.png";
export default function page() {
  return (
    <>
      <Image src={dummyImage} alt="이미지" priority={false} />
    </>
  );
}

✨priority 속성은 이미지 로딩의 우선 순위를 지정합니다. 남용하지 말고 초기 이미지 로딩이 중요한 페이지에서 사용하면 좋다.

외부 이미지

<Image
  src={
    "https://cdn.pixabay.com/photo/2017/01/03/22/00/tower-1950742_1280.jpg"
  }
  alt="이미지"
  fill
  priority={true}
/>

외부 이미지를 참조할 경우 width, height 속성은 필수이다.

또한 추가 설정도 해야 한다.

// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "cdn.pixabay.com",
        port: "",
      },
    ],
  },
};

export default nextConfig;

cdn.pixabay.com에서 이미지를 사용할 수 있도록 설정하는 예시

✨Image 컴포넌트를 사용할 때 width, height 속성은 필수입니다. 만약 사용하지 않을 것이라면 fill 속성을 사용하면 됩니다. 단, fill을 사용하면 부모 요소가 relative, fixed, absoulte 중 하나여야 합니다.