performance
이미지 최적화.
포맷, responsive image, lazy load, Next.js Image, LCP 관점
이미지는 보통 LCP, bandwidth 병목이다. 포맷, 크기, 로딩 전략을 맞추면 체감이 꽤 달라진다.
🖼️ 포맷 선택
| 포맷 | 용도 |
|---|---|
| WebP/AVIF | photo, transparency (AVIF 더 작음, encode 느림) |
| SVG | icon, logo, simple illustration |
| PNG | transparency + sharp edge (fallback) |
| JPEG | photo legacy fallback |
🛠️ 기법
- Responsive:
srcset,sizes, art direction (picture) - Lazy load:
loading="lazy", below-fold only - Priority: LCP hero →
fetchpriority="high", preload, no lazy - Dimensions: width/height attribute → CLS 방지
- CDN resize: on-the-fly width/quality params
🖼️ Next.js Image
- automatic WebP/AVIF, srcset
- lazy default (priority prop for LCP)
- remotePatterns 설정
💡 마무리
- hero 이미지는 preload 또는
priority - 화면보다 큰 원본은 올리지 않기
- placeholder(blur, LQIP) 검토
- 장식용 이미지는 alt 비우기
🔗 참고 자료
- web.dev Learn Images — 반응형 이미지, 포맷, 지연 로딩을 체계적으로 다룬다.
- MDN: img —
srcset,sizes,loading등 img 속성을 정리한다. - MDN: picture — art direction용
picture요소를 설명한다. - Next.js Image Component — Next.js Image 컴포넌트와 최적화 동작을 다룬다.