2024-04-17 TIL
Image 태그
기본 img 태그 대신 next 내장 Image 컴포넌트를 사용하면 lazy loadin(지연 로딩), 이미지 최적화, placeholder 등의 장점이 있다.
LCP(Large Contentful Paint) 란 각 페이지에서 가장 큰 이미지이며, 해당 이미지에 priority 속성을 추가해서 이미지 로드의 우선순위를 줄 수 있다. (다른 Image 컴포넌트에도 사용 가능)
초기 렌더링 시, 빠르게 보여줘야 하는 Image 컴포넌트에 priority 속성을 추가하여 빠르게 보여줘야 할 이미지는 lazy loading을 하지 않도록 설정할 수 있다.
lazy loading
이미지를 로드하는 시점을 필요할 때까지 지연시킬 수 있으며, 예를 들면 뷰포트 밖에 있는 이미지들은 로딩을 지연시키고 뷰포트 안에 있는 이미지만 로드해서, 불필요한 로딩을 줄이고 필요한 이미지만 빠르게 로드할 수 있다.
이미지 사이즈 및 포맷 최적화
디바이스 크기 별로 srcSet을 미리 지정해두고, 사용자의 디바이스에 맞는 이미지를 로드할 수 있다. 또한 Next.js는 이미지를 webp와 같은 용량이 작은 포맷으로 이미지를 변환해서 제공한다. 디바이스에 맞는 이미지 사이즈를 만들고, 용량이 작은 webp 포맷으로 변환하는 작업은 최초 요청 시에 Next.js 서버에서 변환한다. 캐시가 만료될 때까지 캐시 된 이미지를 제공하기 때문에 첫 번째 요청보다 빠르게 이미지를 로드할 수 있다.
placeholder 제공
웹 사이트에 방문했을 때 이미지가 로드되기 전까지 영역의 높이가 0이었다가 이미지가 로드된 후 이미지만큼 영역이 늘어서 레이아웃이 흔들리는 바람에 다른 링크를 클릭하는 경험을 할 수 있는데, 이를 CLS(Cumulative Layout Shift)라고 한다. 레이아웃이 흔들리는 현상을 방지하기 위해 placeholder를 제공한다. 이미지가 로드되기 전에도 이미지 높이만큼 영역을 표시해서 이미지가 로드된 후에 레이아웃이 흔들리지 않도록 하는 것.
참고