[ Next.js ] sizes 속성 사용하여 image 최적화

 

nextjs에는 이미지 최적화를 위해 기존 img 태그가 아닌 next/image의 Image태그를 사용한다.

Image 태그에는 다양한 속성이 있는데 기본적으로 요구되는 것은 src, width, height, alt 이다. 이 경우에는 따로 어떠한 설정을 해주지 않아도 이미지가 최적화되어 가져와진다

import Image from 'next/image'
 
export default function Test() {
  return (
    <div>
      <Image
        src="/test.png"
        width={100}
        height={100}
        alt="test image"
      />
    </div>
  )
}

단, fill 속성을 사용할 경우 width와 height가 필요없고, 이 경우 이미지를 반응형으로 설정할 수 있다.
부모에 position:relative을 설정하고 fill 속성을 넣어 부모 크기를 채우도록 이미지를 조정해준다!
현재 반응형 웹을 만들고 있기 때문에 나는 대부분 이 속성을 사용해야했다 그래서 다음과 같이 사용하려고 했다

<div className="w-full aspect-4/5 relative min-h-32 min-w-32">
  <Image className="rounded" src="/키보드1.webp" alt="키보드1" fill />
</div>

그랬더니 이러한 경고가 떴다

경고를 없애기 위해 sizes에 대해 알아봤다
sizes 속성은 어떤 사이즈의 이미지를 로드할지 뷰포트를 기준으로 기본으로 생성된 srcset으로 부터 가져와 로드해준다. 이때 따로 sizes를 설정해주지 않으면 뷰포트 전체 크기인 100vw로 이미지를 로드해온다.
작은 이미지를 띄울 때 너무 큰 크기로 이미지를 가져오는 것은 비효율적이기 때문에 우리는 sizes를 설정해 최적화 시켜줘야한다!

 

srcset?
srcset은 브라우저에 여러 크기의 이미지 소스를 제공하여, 브라우저가 현재 뷰포트 및 디바이스 조건에 가장 적합한 이미지를 선택할 수 있도록 도와준다. 브라우저는 이 목록 중에서 현재 화면 상황에 가장 적합한 이미지 소스를 선택한다

fill속성 사용시 기본적으로 설정되는 srcset은 
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840] 

imageSizes: [16,32,48,64,96,128,256,384]
imageSizes 같은 경우는 sizes 설정에 의해  deviceSizes보다 작은 이미지가 요구될 때 추가된다
+ device sizes와 imageSizes는 next.config.js에서 커스텀 가능하다

sizes를 설정하지 않고 뷰포트가 1000px일 때 개발자 도구에서 image를 확인하면 다음과 같다

브라우저가 알아서 적절한 이미지 소스를 선택하여 크기가 2048이 되었다

sizes="(max-width:768px) 50vw, (max-width:1300px) 20vw , 256px"

다음과 같이 sizes를 설정해주면 

1000px일 때 내가 예상한 것은 1000px와 가장 가까우면서 1000px보다 작지 않은 srcset에 대해 20vw값일 줄 알았는데
384px로 1080px이 아닌 1920px에 대해 20vw인 값이 나왔다.
찾아보니 sizes가 제공하는 값은 뷰포트 기반의 계산값을 제시할 뿐, 실제로 어떤 이미지 파일(srcset에서 어떤 파일이 선택되는지)이 로드될지는 브라우저가 결정한다고 한다..! 이건 내가 결정할 수 있는 문제는 아닌 것 같아 일단 최대한의 최적화를 위와 같이 1300px 전에는 이미지를 256px로 가져오도록 고정해주고 1300px부터는 20vw, 768px부터는 50vw로 해주고 마무리 했다!