next/image overview
이미지 최적화는 전송량, 레이아웃, 첫 화면 우선순위를 함께 줄인다
큰 이미지를 그대로 보내면 다운로드가 늦고, 크기를 예약하지 않으면 화면이 밀리며,
첫 화면 이미지를 늦게 보내면 LCP가 나빠진다. `next/image`는 이 세 비용을 한 번에 관리한다.
LCP첫 화면 대표 이미지가 얼마나 빨리 보이는지
CLS이미지 로딩 중 레이아웃이 밀리지 않는지
전송량기기와 브라우저에 맞는 크기와 포맷을 보내는지
1공간 예약`width/height` 또는 `fill`로 이미지 자리를 먼저 잡는다.
2후보 폭 제한`sizes`로 뷰포트별 실제 표시 폭을 알려 준다.
3첫 화면 우선LCP 후보에만 `priority`를 붙여 로딩 순서를 당긴다.
4원격 출처 제한외부 이미지는 `remotePatterns`로 허용 범위를 좁힌다.
| 문제 | 원인 | next/image 대응 | 확인 지표 |
|---|
| 느린 첫 화면 |
hero 이미지가 lazy로 밀림 |
priority를 LCP 후보에만 적용 |
LCP 시간 |
| 화면 흔들림 |
이미지 자리 크기 미정 |
width/height 또는 fill |
CLS |
| 불필요한 다운로드 |
모바일에도 큰 원본 전송 |
sizes와 최신 포맷 변환 |
이미지 KB |
기준: 이미지는 “보이는 품질”보다 “필요한 순간에 필요한 크기로 안정적으로 보이는가”를 먼저 본다.