Next.js - Next/image 활용법
특화프로젝트에서 Next.js에서 제공하는 Image태그를 제대로 활용하지 못한 것이 아쉬워서 개인적으로 찾아보았다.
Next/Image 컴포넌트의 기능
Next/Image 컴포넌트에서 제공하는 대표적인 기능은 다음의 3가지입니다.
- lazy loading
- 이미지 사이즈 최적화
- placeholder 제공
각 기능에 대해 어떤 이점이 있는지 정리해 보겠습니다.
lazy loading
lazy loading에 대해서 간단히 설명을 드리면, 이미지 로드하는 시점을 필요할 때까지 지연시키는 기술을 의미합니다. 예를 들면 스크린 밖에 있는 이미지들은 로딩을 지연시키고 스크린 안에 있는 이미지만을 로드해서, 불필요한 대역폭 사용을 줄이고 필요한 이미지만 빠르게 로드할 수 있도록 하는 것이죠.
모든 브라우저에서 잘 동작하는 lazy loading 을 구현하기 위해서는 Intersection Observer 혹은 scroll 이벤트를 통해 스크린에 element가 보일 때를 캐치하여 이미지를 로드하도록 구현해야 합니다(크롬 76 버전 이상부터는 img 태그에 loading=“lazy” 속성을 추가하면 간단하게 적용할 수 있습니다). 즉 FE 개발자인 우리가 알잘딱깔쎈 해야 합니다.
Next/Image를 사용하게 되면 자동으로 lazy loading이 적용됩니다. 물론 중요한 이미지 일부에 lazy loading을 적용하고 싶지 않은 경우에는 해당 기능을 끌 수도 있습니다. Image 컴포넌트의 priority라는 prop을 true로 설정하거나, loading prop에 “eager” 값을 설정하면 됩니다. priorty 값을 설정하는 것이 더 권장되는 방식입니다.
스테이지는 Next/Image를 적용함으로써 50개의 이미지를 로드하던 기존 방식에서 스크린 내에 노출되는 이미지 26개만 로드하도록 변경이 되었습니다. 이를 통해 기존보다 페이지 로드가 빨라졌습니다.
이미지 사이즈 최적화
이미 말씀드렸던 것처럼 스테이지에서는 기존 표시되는 영역에 비해 5배 큰 이미지를 로드하고 있었는데요. Next/Image는 디바이스 크기 별로 srcSet을 미리 지정해두고, 사용자의 디바이스에 맞는 이미지를 다운로드할 수 있게 지원합니다. layout prop 설정에 따라 어떤 srcSet 목록이 변경되는데요. 글 후반 부에 제가 겪은 경험과 연계하여 다시 정리하겠습니다. 또한 Next.js는 이미지를 webp와 같은 용량이 작은 포맷으로 이미지를 변환해서 제공합니다.
장점
- 성능 향상: 디바이스마다 적절한 사이즈의 이미지를 서빙하고, webp와 같은 작은 용량의 포맷을 사용함
- 시각적인 안정성: 이미지 로드 전 placeholder를 제공하여 CLS(Cumulative Layout Shift) 방지
- 빠른 페이지 로딩: viewport에 들어왔을 때만 이미지를 로드하고, 작은 사이즈의 blur 이미지를 미리 로딩하여 사용자에게 더 빠른 페이지를 보여줄 수 있음
Next/Image의 layout 속성
Next/Image 컴포넌트에는 컨테이너 사이즈가 변경되었을 때 이미지 레이아웃이 어떻게 변경될지를 정할 수 있는 layout이라는 prop이 있습니다.
- intrinsic: default, 컨테이너 사이즈가 이미지 사이즈보다 작아졌을 때 컨테이너에 맞게 크기를 줄임
- fixed: (컨테이너 사이즈와 관계없이) 이미지 사이즈를 width, height 속성 값으로 고정
- responsive: 작은 컨테이너에서는 크기가 줄어들고, 큰 컨테이너에서는 크기가 늘어남(이미지 비율 유지)
- fill: relative 포지션을 가진 조상의 너비, 높이와 동일하게 조정함. 주로 objectFit 속성과 함께 사용
<Image
src={firstArticleImage}
alt="first article image"
layout="responsive"
width={500}
height={300}
sizes="(max-width: 600px) 300px, (max-width: 900px) 500px, 1000px"
/>