NEXT.JS의 이미지 최적화 그리고 sizes (3)

이번장은 앞서 이미지 최적화를 다룬 1장 2장에 이어지는 내용입니다.

이번에 다룰 주요 내용은 sizes 적용입니다.

 

next/image - sizes 속성 적용

내용을 살펴보자면 아래와 같습니다.

A string, similar to a media query, that provides information about how wide the image will be at different breakpoints. The value of sizes will greatly affect performance for images using fill or which are styled to have a responsive size.

"Sizes"는 미디어 쿼리와 유사한 문자열로, 다양한 브레이크포인트에서 이미지의 너비에 대한 정보를 제공합니다. "Sizes"의 값은 "fill"을 사용하는 이미지나 반응형 크기를 가진 이미지의 성능에 큰 영향을 미칩니다.

 'sizes' 속성은 이미지 성능과 관련된 두 가지 중요한 포인트가 있습니다.

 

첫번째,

'sizes' 값은 브라우저가 next/image에서 자동으로 생성된 srcset에서 다운로드할 이미지 크기를 결정하는 데 사용됩니다. 브라우저가 선택할 때 이미지가 페이지에서 차지하는 크기를 아직 모르기 때문에, 브라우저는 뷰포트와 동일하거나 더 큰 크기의 이미지를 선택합니다. 'sizes' 속성을 사용하면 브라우저에게 이미지가 실제로 전체 화면보다 작을 것임을 알려줄 수 있습니다. 'fill' 속성이 있는 이미지에 'sizes' 값을 지정하지 않으면 기본 값으로 100vw(전체 화면 너비)가 사용됩니다.

 

두번째, 

'sizes' 속성은 자동으로 생성된 srcset 값을 변경합니다. 'sizes' 값이 없으면 고정 크기 이미지(1x/2x 등)에 적합한 작은 srcset이 생성됩니다. 'sizes'가 정의된 경우 반응형 이미지(640w/750w 등)에 적합한 큰 srcset이 생성됩니다. 'sizes' 속성에 50vw와 같은 뷰포트 너비의 백분율을 나타내는 크기가 포함된 경우, srcset은 필요할 일이 없는 값은 포함하지 않도록 잘라냅니다.

 

예를 들어, 스타일링으로 이미지가 모바일 기기에서 전체 너비로, 태블릿에서는 2개의 열 레이아웃으로, 데스크톱 디스플레이에서는 3개의 열 레이아웃으로 나타날 것을 알고 있다면, 다음과 같은 'sizes' 속성을 포함해야 합니다:

import Image from 'next/image'
 
export default function Page() {
  return (
    <div className="grid-element">
      <Image
        fill
        src="/example.png"
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
      />
    </div>
  )
}

이 예시에서 'sizes' 설정은 성능 지표에 뚜렷한 영향을 줄 수 있습니다.

33vw 크기를 사용하지 않으면, 서버에서 선택된 이미지는 필요한 크기보다 3배 더 넓을 수 있습니다.

파일 크기는 너비의 제곱에 비례하기 때문에, 'sizes'를 사용하지 않으면 사용자가 필요한 것보다 9배 큰 이미지를 다운로드할 수 있습니다.

 

sizes 최적화

next/image에서는 이미지 사이즈에 대한 정의가 크게 두 가지로 나누어집니다.

 

fill 속성을 사용할 때 vs fill 속성을 사용하지 않을 때

먼저, width와 height를 명시한 fill 속성을 사용하지 않을 때는 기본적으로 두 개의(1x , 2x) srcSet을 생성해 사용합니다.

 

하지만 fill 속성을 사용할 때는 뷰포트를 가지고 인식해 로드합니다. 이때의 기본값은 100vw로 생성됩니다.

 

여기서 뷰포트 deviceSizes와 imagesSizes의 설정은 공식 홈페이지의 이미지를 참고하고 넘어가겠습니다.

기본값

// 디바이스의 너비 중단점 배열
deviceSizes: [ 640, 750, 828, 1080, 1200, 1920, 2048, 3840 ]

// 이미지 가로 너비 배열
imageSizes: [   16,    32,   48,     64,     96,   128,   256,   384 ]

위 매핑에서 각각 기본 배열 사이즈가 8로 작성되어 있습니다. 이러한 설정은 페이지 성능과 사용자 경험을 극대화하기 위해 기본값으로 작성되어 있으며, 모든 경우에 완벽하게 1:1 매칭되지 않아도 됩니다. 더 극대화한 경험으로 디테일하게 나누어 작성해도 무방합니다. 기본으로 설정된 값이 사용자 경험에 따라 포인트가 너무 많거나 적다고 느껴지면 next.config.js에 직접 작성할 수 있습니다.

 

작은 디바이스의 경우 640px 너비는 16px 이미지로 매핑될 수 있지만, 큰 디바이스의 경우 3840px 너비는 384px 이미지로 매핑될 수 있습니다. 그 사이의 다양한 디바이스 크기에 대해서는 중간 이미지 사이즈를 선택하여 최적의 사용자 경험을 제공하도록 기본값이 설정되어 있습니다.

 

위 내용을 포함하여 작성된 코드는 아래와 같습니다.

<Image 
    fill={true} 
    src={'/images/955535072f0c-10.png'} 
    alt="Images" 
    sizes="(max-width: 480px) 100vw, // 스마트폰 세로
           (max-width: 768px) 50vw,  // 가로 태블릿
           (max-width: 1279px) 33vw, // 가로 태블릿 or 노트북
           25vw"                     // 데스크탑
/>

(max-width: 480px) 100vw: 화면 너비가 480px 이하일 때, 이미지는 화면 너비의 100%(100vw)를 차지합니다. 이는 스마트폰 세로 모드를 고려한 것입니다.

 

(max-width: 768px) 50vw: 화면 너비가 481px에서 768px 사이일 때, 이미지는 화면 너비의 50%(50vw)를 차지합니다. 이는 가로 태블릿을 고려한 것입니다.

 

(max-width: 1279px) 33vw: 화면 너비가 769px에서 1279px 사이일 때, 이미지는 화면 너비의 33%(33vw)를 차지합니다.이는 가로 태블릿이나 노트북을 고려한 것입니다.

 

25vw: 위의 모든 조건에 해당하지 않을 때, 즉 데스크톱일 때는 이미지가 화면 너비의 25%(25vw)를 차지합니다.

 

이러한 설정은 대표적인 반응형 분기점을 참고하여 작성된 예시입니다.

이는 다양한 디바이스와 화면 크기에 대응하여 이미지가 적절한 크기로 제공될 수 있도록 하고, 더 작은 화면에서는 작은 이미지를, 더 큰 화면에서는 큰 이미지를 로드하여 사용자 경험과 성능을 최적화하는 데 도움이 됩니다.

 

이번장으로 이미지 최적화를 위한 필수적인 옵션까지 다 살펴보았고,다음장에서 배경 이미지 설정 방법 및 차이를 알아보겠습니다.