Next.js 14에서 원격 이미지 최적화하기

 

 

원격 서버를 통해 제품 이미지를 가져왔습니다. 이 때 이미지의 크기가 일정하지 않아서 명시적으로 이미지 크기를 지정할 수 없었습니다. 이번 아티클은 해당 문제를 해결하는 과정을 정리해보았습니다.

 

Next.js의 Image 컴포넌트는 자동 이미지 최적화를 위한 기능으로 HTML <img> 요소를 확장합니다.

import Image from 'next/image'

• WebP 및 AVIF와 같은 최신 이미지 형식을 사용하여 각 디바이스에 적합한 크기의 이미지를 자동으로 제공합니다.
• 이미지가 로드될 때 레이아웃 쉬프트를 방지합니다.
• 브라우저 지연 로딩을 사용하여 이미지가 뷰포트에 들어올 때만 로드됩니다.
• 원격 서버에 저장된 이미지도 온디맨드 이미지 크기 조정이 가능합니다.

온디맨드 이미지
요청 시에 이미지를 동적으로 생성하거나 조정하는 방식으로 웹 개발에서 이미지 관리와 최적화를 자동화하고 효율화하는 데 중요한 개념입니다. next/image 컴포넌트를 사용하면, 동적 이미지 생성 및 최적화를 쉽게 구현할 수 있으며, 이를 통해 웹 애플리케이션의 성능과 사용자 경험을 크게 개선할 수 있습니다.

원격 이미지

Next.js는 가져온 로컬 이미지의 너비와 높이를 자동으로 결정하며 누적 레이아웃 이동을 방지하는 데 사용됩니다.

// https://nextjs.org/docs/app/building-your-application/optimizing/images#local-images

import Image from 'next/image'
import profilePic from './me.png'
 
export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Picture of the author"
      // width={500} automatically provided
      // height={500} automatically provided
    />
  )
}

원격 이미지는 src 속성이 URL 문자열로 외부에서 가져오는 이미지를 의미합니다. 로컬 이미지는 빌드 시점에 접근할 수 있지만 원격 이미지는 빌드 시점에 접근할 수 없기 때문에 너비와 높이를 수동으로 지정해야 합니다.

 

너비와 높이는 이미지의 올바른 종횡비를 유추하고 이미지 로딩 시 레이아웃 이동을 방지하는 데 사용됩니다. 너비와 높이는 이미지 파일의 렌더링 크기를 결정하지 않습니다.

// https://nextjs.org/docs/app/building-your-application/optimizing/images#remote-images

import Image from 'next/image'
 
export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

Image 컴포넌트는 레이아웃 이동을 방지하기 위해 세 가지 방법 중 하나로 크기를 지정해야 합니다.

1. 정적 가져오기를 사용하여 로컬 이미지를 가져오면 자동으로 크기가 지정된다.
2. 빌드 시점에 크기를 알 수 없을 때 명시적으로 너비와 높이 속성을 지정한다.
3. 가져올 이미지의 크기를 모르거나 제각각인 경우 fill 속성을 사용하여 이미지가 부모 요소를 채우도록 지정한다.

원격 이미지 최적화

URL 패턴 목록 정의

외부 원격 서버로부터 이미지를 가져올 때 패턴 목록에 해당 원격 서버를 정의해야 한다. 그렇지 않으면 에러가 발생합니다.

next.config.js 파일에 정의합니다.

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

export default nextConfig;

fill 속성  사용하기

이미지의 크기를 알 수 없는 경우 fill 속성을 사용하면 된다고 합니다. fill 속성을 사용하면 이미지의 크기를 부모 요소에 따라 조정할 수 있습니다. 부모 요소의 position값은 반드시 ‘relative’, ‘fixed’, ‘absolute’ 중 하나여야 한다. 참고로 이미지 요소의 position 기본값은 ‘absolute’ 이다.

 

sizes 속성은 미디어 쿼리와 유사한 문자열로, 다양한 중단점에서 이미지의 크기가 어떻게 변경될지에 대한 정보를 제공하며, fill 속성을 사용하거나 반응형 크기를 갖도록 스타일이 지정된 이미지의 성능에 큰 영향을 준다.

 

브라우저가 다운로드할 이미지 크기를 결정하는데 사용된다. 브라우저는 이미지의 크기를 알지 못할 때 뷰포트와 같거나 더 큰 이미지를 선택한다. 이때 sizes 속성을 사용하면 이미지 크기가 뷰포트보다 작다는 것을 브라우저에게 알릴 수 있다. fill 속성을 사용할 때 이미지 크기를 지정하지 않으면 기본값은 전체 화면 너비(100vw)이다.

 

sizes 속성을 통해 다양한 중단점에서 가져올 이미지 크기를 설정한다.

// 이미지 요소에 object-fit: ‘contain’을 설정하면 가로 세로 비율을 유지할 수 있다.

<div className="relative h-40 w-40 overflow-hidden rounded-lg">
    <Image
      fill
      sizes="160px"
      src={product.image}
      alt={product.title}
      className="object-contain group-hover:opacity-75"
    />
</div>