Next/Image

Lazy loading 구현방법

• Intersection Observer 혹은 scroll 이벤트를 통해 스크린에 element가 보일 때를 캐치하여 이미지를 로드하도록 구현
• 크롬 76 버전 이상부터는 img 태그에 loading=“lazy” 속성을 추가하면 간단하게 적용할 수 있음

Next/Image의 역할

• 사용자의 디바이스에 맞는 이미지 사이즈를 만들고, 용량이 작은 webp 포맷으로 변환하는 작업은 이미지에 대한 최초 요청 시에 Next.js 서버에서 진행됨
• 이후 요청에는 캐시가 만료될 때까지 캐시 된 이미지가 제공되기 때문에 첫 번째 요청보다 훨씬 빠르게 이미지를 서빙할 수 있음
• 캐시가 만료된 후 요청이 들어오면 오래된 이미지를 우선 제공하고, 백그라운드에서 이미지 최적화를 다시 진행함
• 이미지가 캐싱 되는 기간은 next.config.js의 images.minimumCacheTTL 구성 또는 CDN에서 응답한 이미지의 Cache-Control 헤더 중 더 큰 것으로 정의됨

CLS (Cumulative Layout Shift)

• 어떤 웹 사이트에 방문했을 때 이미지가 로드되기 전까지 영역의 높이가 0이었다가 이미지가 로드된 후 이미지만큼 영역이 늘어서 레이아웃이 흔들림
• Next/Image는 레이아웃이 흔들리는 현상을 방지하기 위해 placeholder를 제공함
• 이미지가 로드되기 전에도 이미지 높이만큼 영역을 표시해서 이미지가 로드된 후에 레이아웃이 흔들리지 않도록 하는 것임
• placeholder는 빈 영역 또는 blur 이미지(로컬 이미지의 경우 build 타임에 생성, 리모트 이미지의 경우에는 base64로 인코딩된 data url 을 지정해 줘야 함)로 적용할 수도 있고, 커스텀 하게 설정할 수도 있음

Next/Image 장점

• 성능 향상: 디바이스마다 적절한 사이즈의 이미지를 서빙하고, webp와 같은 작은 용량의 포맷을 사용함
• 시각적인 안정성: 이미지 로드 전 placeholder를 제공하여 CLS(Cumulative Layout Shift) 방지
• 빠른 페이지 로딩: viewport에 들어왔을 때만 이미지를 로드하고, 작은 사이즈의 blur 이미지를 미리 로딩하여 사용자에게 더 빠른 페이지를 보여줄 수 있음

Reference

• https://chanto11.tistory.com/72
• https://fe-developers.kakaoent.com/2022/220714-next-image/
• https://developer.mozilla.org/ko/docs/Web/HTML/Element/img
• https://blind513.tistory.com/605
• https://bmangrok.tistory.com/entry/Javascript-%EC%9D%B4%EB%AF%B8%EC%A7%80%EA%B0%80-%EC%97%86%EC%9D%84-%EA%B2%BD%EC%9A%B0-alt%EB%A9%94%EC%84%B8%EC%A7%80-%EB%8C%80%EC%8B%A0%EC%97%90-%EB%8C%80%EC%B2%B4-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%B6%9C%EB%A0%A5%ED%95%98%EA%B8%B0
• https://mycodings.fly.dev/blog/2022-09-08-all-about-nextjs-image-component