Next/Image를 활용한 이미지 최적화
프론트엔드
Next/Image를 활용한 이미지 최적화
두줄요약
Next/Image로 lazy loading, WebP 변환, placeholder를 적용해 이미지 전송량과 로딩 시간을 줄였습니다.\nlayouts와 sizes 설정을 조정해 과도한 고해상도 요청 및 이미지 생성 비용을 해결했습니다.
문제 상황
- 홈 이미지 약 50개, 총용량 약 25MB로 인한 로딩 지연과 끊김 현상
- 실제 렌더링 크기보다 큰 원본 이미지 로드와 디바이스별
srcSet미적용
해결 방법
Next/Image적용으로 lazy loading, WebP 변환, placeholder 기반 CLS 방지sizes기본값 조정과imageSizes·deviceSizes축소로 과도한 고해상도 이미지 요청 및 변형 이미지 생성 감소- 고정 크기 이미지에
layout="fixed"적용으로 1x·2xsrcSet만 생성
성능/운영 포인트
- 이미지 최초 요청 시 Next.js 서버의 리사이징·포맷 변환 비용과 컨테이너별 초기 생성 지연
- 최적화 이미지 캐시 TTL을
minimumCacheTTL또는 CDNCache-Control헤더로 관리 - 홈 이미지 총용량 25MB에서 589KB, 전체 리소스 로드 시간 1.11초에서 386ms로 감소
주의할 점
fill·responsive레이아웃에서width,height는 렌더링 크기가 아닌 원본 비율 추정용 값sizes미지정 시 기본100vw로 인해 3840px 이미지 요청 가능성- 리모트 이미지는 허용 CDN 도메인 설정과
width·height·blurDataURL별도 지정 필요
