[NextJs] 이미지 최적화에 대해 알아보자

     

목차

 

 

 

Next Image

알아서 lazy loading등이 적용되고 최적화가 된다. 

import logo from "@/assets/logo.png";
import Link from "next/link";
import Image from "next/image";

export default function Header() {
  console.log(logo);
  return (
    <header id="main-header">
      <Link href="/">
        <Image src={logo} alt="Mobile phone with posts feed on it" />
      </Link>
      <nav>
        <ul>
          <li>
            <Link href="/feed">Feed</Link>
          </li>
          <li>
            <Link className="cta-link" href="/new-post">
              New Post
            </Link>
          </li>
        </ul>
      </nav>
    </header>
  );
}

 

png를 불러온 것을 콘솔 찍으면 다음과 같이 보이게 되는데 이때 높이와 너비 정보를 통해 next는 미리 공간을 마련해 두어

layout 밀림 현상을 방지한다.

logo를 console.log 찍은 모습

 

또한 아래와 같이 srcset을 보면 화면 크기별로 동적으로 이미지의 크기 조정이 된다.

 

 

[NextImage] priority 속성 사용하기

아래와 같이 헤더에 있는 이미지는 항상 로드되어야 한다.

이 이미지가 확실히 로드될 것을 안다면 priority를 이용해 주면 된다.

그러면 next는 사전 로딩을 하고 lazy loading을 비활성화 시킨다.

 

아래와 같이 priority를 추가해 주면 된다.

   <Image
          sizes="10vw"
          priority
          src={logo}
          alt="Mobile phone with posts feed on it"
        />

 

[NextImage] fill property 사용하기

이미지 데이터를 불러올 경우에는 width와 height를 지정해 주어야 하는데 권장되는 방법은 아니다.

따라서 fill property를 써주면 된다.

 

 

이때 다음과 같은 오류가 발생하는데 nextConfig에서 출처를 허용시켜 주면 된다.

오류 발생

 

/** @type {import('next').NextConfig} */
const nextConfig = {
    images: {
        remotePatterns: [{hostname: 'res.cloudinary.com'}]
    }
};

export default nextConfig;

 

 

[NextImage] 이미지 서빙 사이트를 통한 이미지 최적화 하기

아래와 같이 url을 그 사이트에 맞게 최적화 시켜주면 된다.

//cloudinary에서 제공하는 온디맨드 이미지 최적화 기능 사용
//크기 재조정과 최적화 작업함
function imageLoader(config) {
  const urlStart = config.src.split("upload/")[0];
  const urlEnd = config.src.split("upload/")[1];
  const transformations = `w_200,q_${config.quality}`;
  return `${urlStart}upload/${transformations}/${urlEnd}`;
}

 

  <div className="post-image">
        {/* nextjs 이미지 경로 결정할때 실행되는 함수 */}
        <Image
          loader={imageLoader}
          quality={60}
          src={post.image}
          fill
          sizes="10vw"
          alt={post.title}
        />
      </div>