이미지 포맷 최적화
전통적인 JPEG나 PNG 대신, 압축 효율이 높은 webp 또는 AVIF와 같은 최신 포맷으로 변환할 수 있습니다.
이 포맷들은 이미지 품질을 유지하면서도 파일 크기를 크게 줄여줍니다. 단, 일부 구버전의 브라우저에서는 최신 이미지 포맷을 지원하지 않으므로, 호환성을 고려할 필요가 있습니다.
이미지 사이즈 조정
화면에 노출되는 크기에 비해 이미지가 과도하게 큰 경우 이미지를 작게 리사이징할 수 있습니다.
필요한 크기에 맞게 잘라 서버에서 내려줄 수 있습니다. 또한, 다양한 디바이스 해상도에 대응하기 위해 Responsive Images 기술, 즉 srcset과 sizes 속성을 활용할 수 있습니다. 이 경우, 브라우저가 현재 화면 크기에 최적화된 이미지를 선택하여 로드할 수 있습니다.
지연 로딩(Lazy Loading)
지연 로딩은 사용자가 화면에 스크롤할 때 해당 위치에 도달하는 이미지가 로드되도록 설정하는 방법입니다. 지연 로딩을 통해 초기 로딩 속도를 개선할 수 있습니다. HTML loading="lazy" 속성을 통해 구현할 수 있으며, 이를 통해 불필요한 이미지 로드를 방지할 수 있습니다.
CDN(Content Delivery Network)
CDN을 적용하면 사용자가 지리적으로 가까운 서버에서 이미지를 다운로드하게 되어 로딩 속도를 단축시킬 수 있습니다.
Next.js의 Image 컴포넌트
Next.js는 위와 같은 이미지 최적화를 위한 Image 컴포넌트를 제공합니다.
-
이미지 포맷 최적화
크롬 브라우저의 경우, Image 컴포넌트는 이미지를 webp 포맷으로 변경하여 전달합니다. -
이미지 사이즈 조정
Image 컴포넌트는 이미지 요청이 들어올 때마다 각 디바이스와 브라우저에 최적화된 이미지로 사이즈를 조정하여 전달해줍니다. -
지연 로딩
Image 컴포넌트는 이미지를 지연 로딩하여 필요한 이미지만 필요한 시점에 자동적으로 로드할 수 있게 합니다. -
캐싱
생성된 이미지는 캐싱되어 동일한 요청을 보내지 않고 캐싱된 이미지를 사용합니다. -
Placeholder 제공
이미지가 로드되기 전 해당 영역의 너비가 0이었다가 로드된 이후 이미지가 너비를 차지하게 되어 레이아웃이 흔들리는 CLS(Cumulative Layout Shift) 현상이 발생하지 않도록 placehodler를 제공합니다. 즉, 로드되기 전 이미지가 표시될 영역을 미리 표시하여 레이아웃이 흔들리지 않도록 만들어줄 수 있습니다.
참고
Next Image
