[Next.js] Next 13 이미지 최적화 적용하기

Next에서 제공하는 Image를 사용하면 이미지를 최적화하여 로딩 성능을 향상시킬 수 있다고 한다.
또한, Image를 사용할 때 다양한 속성들을 적용할 수 있고 다른 도메인에서 이미지를 가져올 경우 크로스 오리진(Cross-Origin) 정책과 관련된 문제를 해결하기 위해 next.config.js 파일에 설정을 추가해줘야하는 부분들이 있었다.

next/Image 사용하기

Next에서 제공하는 Image 컴포넌트를 가져온 후 src, width, height, alt를 입력해준다.
src, width(너비), height(높이), alt(이미지 설명)는 필수 속성이며 속성을 지정하지 않으면 코드가 제대로 동작하지 않을 수 있다. 상대경로를 변수로 가져와서 적용하는 방법과 src에 직접 입력해주는 방법으로 설정해보았다.
마지막은 다른 도메인에서 경로를 가져오고 있는데 도메인이 다를 경우에는 next.config.js 파일에 도메인에 대한 설정을 추가해줘야 오류가 발생하지 않는다.

page.tsx

import Image from "next/image";
import NightSky from "../../public/images/night-sky.jpg";

export default function Home() {
  return (
    <section>
      <Image src="/images/aurora.jpg" width={500} height={500} alt="sky" />
      <Image src={NightSky} width={500} height={500} alt="sky" />
      <Image
        src="https://images.unsplash.com/photo-1597200381847-30ec200eeb9a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80"
        width={500}
        height={500}
        alt="sky"
      />
    </section>
  );
}

next.config.js

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

module.exports = nextConfig;

next/image 추가 속성 적용해보기

next/image에는 src, width, height, alt 필수 속성외에 fill, sizes, quality, priorty, placeholder, style, loading 등 추가적인 속성들이 존재했다.

• fill: 이미지를 부모요소의 크기에 어느정도로 채울지 설정할 수 있으며 width, height 알 수 없을 경우에 유용하게 사용할 수 있다. 부모요소에 position을 설정해줘야하며 기본적으로 img 요소에는 position: "absolute" 스타일이 자동으로 할당된다고 한다.
• sizes: 이미지의 다양한 화면 크기에 대한 이미지 크기를 지정하는 속성이며 미디어 쿼리와 함께 사용하여 다양한 화면 크기에 맞게 이미지 크기를 조정할 수 있다.
• quality: 이미지의 품질을 설정하는 속성으로 이미지를 압축하여 파일 크기를 줄일 수 있다. 1~100사이에서 정할 수 있으며 100은 최고 품질로 파일크기가 가장 크고 기본값은 75이다.
• priority: 이미지를 로드할 때 우선 순위를 지정하는 속성이다.

import Image from "next/image";
import NightSky from "../../public/images/night-sky.jpg";

export default function Home() {
  return (
    <section className="fixed w-full h-full overflow-hidden">
      <Image
        src={NightSky}
        alt="sky"
        placeholder="blur"
        quality={100}
        fill
        sizes="100vw"
        style={{ objectFit: "cover" }}
        priority
      />
    </section>
  );
}