Next.js
Next/Image를 활용한 이미지 최적화
📌 Image Component next.js에서는 이미지 최적화를 위해 Image 컴포넌트를 제공한다. Image 컴포넌트에서 제공하는 대표적인 기능은 아래와 같다. lazy loading 이미지 사이즈 최적화하여 빠른 로딩이 가능하다. placeholder 제공하여 CLS(Cumulative Layout Shift)를 방지해 준다. CLS(Cumulative Layout Shift)란? 어떤 웹 사이트에 방문했을 때 이미지가 로드되기 전까지 영역의 높이가 0이었다가 이미지가 로드된 후 이미지만큼 영역이 늘어서 레이아웃이 흔들리는 현상 👉 lazy loading 이미지 로드하는 시점을 필요할 때까지 지연시키는 기술을 의미한다. 스크린 밖에 있는 이미지들은 로딩을 지연시키고 스크린 안에 있는 이미지만을 ..
2024. 2. 28.