Next/Image를 활용한 이미지 최적화

카카오 엔터테인먼트의 스테이지 서비스에서 홈 화면에 노출되는 수많은 고용량 이미지로 인한 페이지 성능 저하 문제를 Next/Image 컴포넌트 도입으로 해결한 경험을 공유합니다. 기존에는 평균 500KB의 이미지 50개가 로드되어 총 25MB에 달하는 용량으로 인해 페이지 로딩이 끊기는 현상이 발생했습니다.

Next/Image는 자동으로 lazy loading, 이미지 사이즈 최적화, placeholder 제공 기능을 지원하여 이러한 문제를 효과적으로 개선했습니다. 특히, Viewport 내의 이미지만 로딩하고, 실제 렌더링 사이즈에 맞게 이미지를 최적화하여 불필요한 대역폭 사용을 줄이고 사용자 경험을 향상시켰습니다.

이 글은 Next/Image 도입 과정에서 겪었던 장단점과 해결 방법을 상세히 다룹니다.