이미지 최적화 기준
큰 이미지는 페이지 로딩을 늦추고 모바일 데이터 사용량을 늘립니다. `next/image`는 크기 예약, 반응형 요청, 포맷 변환, 지연 로딩을 한 흐름으로 묶어 초기 경험을 안정화합니다.
반응형 요청
화면 폭에 맞는 이미지 크기를 선택해 불필요한 전송을 줄입니다.
포맷 전환
브라우저가 지원하는 효율적인 형식으로 용량을 낮춥니다.
로딩 제어
첫 화면 이미지는 우선 처리하고 나머지는 늦게 받아옵니다.
큰 원본
화면보다 큰 이미지를 그대로 전송하면 대기 시간이 늘어납니다.
사용자 영향
로딩 지연, 데이터 사용량 증가, Core Web Vitals 저하로
이어집니다.
Image 적용
src, alt, width, height, priority, sizes를 목적에 맞게
지정합니다.
개선 결과
전송량을 낮추고 레이아웃을 고정해 체감 속도를 높입니다.
이미지 최적화는 컴포넌트 하나로 끝나지 않고 원본 크기, 속성 설정, 외부 도메인 정책, 캐싱까지 함께 맞출 때 효과가 큽니다.