image 썸네일형 리스트형 [NextJs] Next.js 13 도입으로 인한 이미지 최적화 경험: Next/Image 컴포넌트의 강력한 기능들 프로젝트에서 next.js 13버전을 도입하여 이미지 최적화 한 경험을 토대로 작성해봅니다. Next/Image 컴포넌트의 기능Next/Image 컴포넌트에서 제공하는 대표적인 기능은 다음의 3가지입니다. 각 기능에 대해 어떤 이점이 있는지 정리해 보겠습니다.lazy loadinglazy loading는 이미지 로드하는 시점을 필요할 때까지 지연시키는 기술을 의미합니다.예를 들면 스크린 밖에 있는 이미지들은 로딩을 지연시키고 스크린 안에 있는 이미지만을 로드해서, 불필요한 대역폭 사용을 줄이고 필요한 이미지만 빠르게 로드할 수 있도록 하는 것입니다. 모든 브라우저에서 잘 동작하는 lazy loading 을 구현하기 위해서는 Intersection Observer 혹은 scroll 이벤트를 통해 스크린에 .. 더보기 이전 1 다음
