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

이 게시물은 카카오 엔터테인먼트의 스테이지 서비스에 Next/Image를 적용하여 이미지 최적화를 진행한 경험을 공유합니다.

주요 적용 기능

• lazy loading으로 viewport 내 이미지 로딩 최적화
• 디바이스에 맞는 이미지 사이즈 제공
• placeholder 기능으로 레이아웃 안정성 확보

성능 향상 결과

총 이미지 용량이 25MB에서 589KB로 줄어들고, 페이지 로딩 시간이 1.11초에서 386ms로 감소하였습니다.