sizes

<aside> 💡 고유 크기(로드된 이미지 크기)는 next.config.js 파일의 imageSizes deviceSizes 속성 값을 기준으로 결정된다(srcset). 사용자 디바이스 크기에 따라 아래 중단점 중 하나가 고유 크기가 된다.

deviceSizes 기본값 : [640, 750, 828, 1080, 1200, 1920, 2048, 3840] imageSizes 기본값 : [16, 32, 48, 64, 96, 128, 256, 384]

</aside>

미디어 조건에 해당하는 이미지의 최적 크기를 지정하는 속성

Next/Image에서 layout='responsive' 혹은 layout='fill' 일 때 sizes 속성을 지정하지 않으면 항상 100vw 너비의 이미지를 로드한다. 만약 ~500px 정도의 배너에 사용한다면 필요 이상으로 큰 이미지를 로드하는 셈이 된다

렌더링에 필요한 너비는 373px 밖에 안되지만 2048 × 1536 크기의 이미지를 로드했다

<aside> 💡 NextJS에서 sizes 속성은 layout='responsive' layout='fill' 일때만 적용된다.

</aside>

이때 sizes 속성을 지정하면 불필요하게 큰 이미지 로드를 방지할 수 있다. sizes 속성은 이미지 소스 리스트에서 브라우저가 다운로드할 이미지 크기를 결정할 때 참고하는 속성이다.

브라우저는 렌더링할 이미지 크기를 알 수 없기 때문에 기본적으로 뷰포트보다 크거나 같은 크기의 이미지를 선택한다. sizes 속성을 사용하면 이미지가 뷰포트보다 작다는 것을 알려줄 수 있다.

width는 이미지 출력 크기만 지정하지만 sizes는 출력 크기 + 최적 크기도 함께 지정하는 개념(sizes 관련 더 자세한 내용은 노트 링크 참고)

<div className="grid-element">
  <Image
    src="/example.png"
    fill
    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
  />
</div>

• 뷰포트 크기가 768px 이하면 100vw 크기와 가장 근접한 이미지 사용
• 뷰포트 크기가 769px ~ 1200px 사이면 50vw 크기와 가장 근접한 이미지 사용
• 뷰포트 크기가 1201px 이상이면 33vw 크기와 가장 근접한 이미지 사용

배너처럼 고정적인 크기라면 sizes="373px" 이렇게 특정 사이즈를 직접 지정할 수도 있다

sizes 속성을 373px로 지정한 후 고유 크기가 750px로 줄었다(레티나 디스플레이에선 2배 큰 이미지를 사용한다)

한편 NextJS에선 sizes 속성에 어떤 값을 명시했는지에 따라 다른 이미지 소스 리스트를 생성한다.

• sizes 속성을 명시하지 않으면 고정 크기 이미지에 적합한 small source set을 생성한다

  'responsive' 'fill' 레이아웃일 때 sizes 속성을 명시하지 않으면 항상 100vw가 되므로 주의

• sizes 속성을 명시하면 반응형 이미지에 적합한 large source set을 생성한다.