프론트엔드
Next/Image를 활용한 이미지 최적화
두줄요약
Next/Image로 지연 로딩·WebP 변환·반응형 이미지를 적용해 이미지 전송량과 로딩 시간을 줄였습니다.\n`sizes`와 srcSet 설정을 조정해 과도한 고해상도 요청 및 최초 생성 지연을 해결했습니다.
문제 상황
- 홈 이미지 약 50개, 총 25MB 수준의 과도한 다운로드와 점진적 로딩으로 인한 끊김
- 표시 영역보다 큰 원본 이미지와 디바이스 구분 없는 이미지 로딩
해결 방법
- Next/Image의 lazy loading, 디바이스별 srcSet, WebP 변환, placeholder 적용
- 리모트 이미지 도메인 허용과 width·height·blurDataURL 명시
- 고정 크기 영역의
fixedlayout 사용 및 imageSizes·deviceSizes 축소
주의할 점
fill·responsivelayout의 width·height는 렌더링 크기가 아닌 원본 비율 추정 용도sizes미지정 시 기본값100vw로 인해 3840px 이미지 요청 가능성- 다중 컨테이너 환경에서 최초 이미지 최적화 생성 지연과 과도한 srcSet 변형 수
성능/운영 포인트
sizes기본값 조정으로 실제 출력 크기에 맞는 이미지 요청- 이미지 총용량 25MB에서 589KB, loaded 시간 1.11초에서 386ms로 감소
- 최초 최적화 뒤 캐시 제공, 만료 뒤 이전 이미지 제공과 백그라운드 재최적화
