Core Web Vitals을 위한 이미지 최적화

# 이미지 최적화가 Core Web Vitals에 미치는 영향 Google의 Core Web Vitals는 검색 순위에 직접적인 영향을 미치는 세 가지 지표입니다. 그리고 이미지? 세 가지 모두에 영향을 줍니다. ## LCP(Largest Contentful Paint) **목표: < 2.5초** 히어로 이미지는 일반적으로 LCP 요소입니다. 최적화하려면: 1. **LCP 이미지 사전 로드**: `` 2. **WebP 사용** — 30% 더 작음 = 30% 더 빠른 로드 3. **반응형 이미지** — 2000px 이미지를 모바일에 제공하지 마세요 4. **우선순위 힌트** — 히어로 이미지에 `fetchpriority="high"` ## INP(Interaction to Next Paint) **목표: < 200ms** 메인 스레드의 무거운 이미지 처리가 상호작용을 차단합니다: 1. **폴드 아래 이미지 지연 로드** 2. **비동기 디코딩** — `decoding="async"` 3. **브라우저 도구 사용** — 처리는 Web Workers를 통해 메인 스레드 외부에서 발생합니다 ## CLS(Cumulative Layout Shift) **목표: < 0.1** 크기가 없는 이미지가 레이아웃 이동을 유발합니다: 1. **항상 너비/높이 지정** — HTML 또는 CSS에서 2. **가로세로 비율 박스 사용** — 이미지 로드 전 공간 확보 3. **콘텐츠 주입 피하기** — 기존 콘텐츠 위에 이미지 로드하지 않기 ## 실제 영향 최적화 전: - LCP: 4.2초 ❌ - CLS: 0.25 ❌ - INP: 380ms ❌ 이미지 최적화 후: - LCP: 1.8초 ✅ - CLS: 0.02 ✅ - INP: 120ms ✅ ## AmberPic의 장점 당사의 도구는 다음을 도와줍니다: - 업로드 전 이미지 압축(더 작은 LCP) - 최신 형식으로 변환(더 빠른 디코딩) - 반응형 중단점을 위한 일괄 크기 조정(적절한 크기) --- *이미지가 CDN에 도달하기 전에 최적화하세요 — [AmberPic 사용해 보기](/ko/compress/)。*