이미지 최적화와 Core Web Vitals: 실전 가이드

구글이 몇 년 전 Core Web Vitals를 랭킹 요소로 쓰기 시작하면서 갑자기 모두가 페이지 속도에 관심을 가졌어. 근데 실제로 뭐가 페이지를 느리게 만드는지 파보면 거의 항상 같은 범인이야: 이미지.

평균적인 웹 페이지에서 이미지가 전체 페이지 무게의 약 50%를 차지해. 이미지를 제대로 하면 성능 퍼즐의 절반을 푼 거야.

중요한 세 가지 지표

LCP (Largest Contentful Paint) — 가장 큰 보이는 요소가 얼마나 빨리 로드되는지. 보통 이미지야. 구글은 2.5초 이내를 원해.

CLS (Cumulative Layout Shift) — 페이지 로드 중에 요소들이 얼마나 튀는지. 크기가 정의되지 않은 이미지가 주요 원인이야. 목표: 0.1 미만.

INP (Interaction to Next Paint) — 페이지가 사용자 동작에 얼마나 빨리 반응하는지. 무거운 이미지가 메인 스레드를 막아 상호작용을 지연시킬 수 있어. 목표: 200ms 미만.

효과는 진짜야

일반적인 콘텐츠 사이트에서 이미지를 최적화하면 이렇게 돼:

| 지표 | 최적화 전 | 최적화 후 | |------|----------|----------| | 페이지 무게 | 4.2 MB | 890 KB | | LCP | 4.8초 | 1.6초 | | CLS | 0.25 | 0.02 | | 로드 시간 (3G) | 18초 | 4초 |

체리피킹이 아니야. 내가 실제로 작업한 사이트의 숫자야. 수정은 복잡하지 않아 — 약간의 의도만 있으면 돼.

1단계: 적절한 크기, 적절한 포맷

가장 큰 성과는 이미지를 적절한 크기로 제공하는 거야. 1200px로 표시되는 3000px 너비 히어로 이미지는 필요한 것보다 6배 많은 픽셀을 보내고 있어.

표시 크기에 맞게 이미지를 리사이즈해. 레티나 디스플레이는 2배로 — 이미지가 600px로 표시되면 1200px로 만들어.

그리고 적절한 포맷을 골라:

• WebP — 같은 품질에서 JPEG보다 25-35% 작아. 기본값으로 써.
• AVIF — WebP보다 더 작지만 인코딩이 느리고 브라우저 지원이 따라오는 중.
• JPEG — 범용 폴백. WebP가 안 되는 곳에서 사진용으로 여전히 괜찮아.
• PNG — 투명도가 필요하고 WebP를 쓸 수 없는 이미지에만.
• SVG — 아이콘, 로고, 간단한 일러스트. 작은 파일 크기에 무한 스케일링.

2단계: 적극적으로 압축

대부분의 이미지는 화면이 표시할 수 있는 것보다 더 많은 품질을 갖고 있어. JPEG를 품질 80으로 압축해도 아무도 차이를 못 알아채 — 하지만 파일은 40-60% 작아져.

대략적인 가이드:

| 품질 수준 | 용도 | 일반적인 절약 | |----------|------|-------------| | 90-100 | 사진 포트폴리오 | 10-20% | | 75-85 | 일반 웹 이미지 | 40-60% | | 60-75 | 썸네일, 배경 | 60-80% |

품질 수준을 추측하지 마. 압축하고 결과를 봐. 차이를 모르겠으면 압축이 괜찮은 거야.

3단계: 레이아웃 시프트 고치기

페이지의 모든 이미지에 명시적인 width와 height 속성이 있거나 CSS aspect-ratio를 써야 해. 이것 없으면 브라우저가 얼마나 공간을 확보할지 몰라서 이미지가 로드되면서 콘텐츠가 튀어.

<!-- 좋음: 브라우저가 필요한 공간을 알아 -->
<img src="photo.webp" width="800" height="600" alt="설명" />

<!-- 이것도 좋음: CSS aspect ratio -->
<img src="photo.webp" style="aspect-ratio: 4/3; width: 100%;" alt="설명" />

이것만으로도 CLS를 불합격에서 합격으로 바꿀 수 있어.

4단계: 스크롤 아래 이미지 지연 로드

페이지가 처음 로드될 때 보이지 않는 이미지는 사용자가 스크롤할 때까지 로드하지 마.

<img src="photo.webp" loading="lazy" alt="설명" />

속성 하나. 그게 다야. 하지만 히어로 이미지나 LCP 요소는 지연 로드하지 마 — 즉시 로드되어야 해.

5단계: 반응형 이미지 사용

다른 화면 너비에 다른 크기를 제공해. 폰에는 1400px 이미지가 필요 없어.

<img
  srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  src="photo-800.webp"
  alt="설명"
/>

맞아, 여러 크기를 생성해야 해. 하지만 모바일에서의 대역폭 절약이 상당해.

SVG: 종종 간과되는 최적화

PNG인 아이콘이나 로고가 있으면 SVG로 변환해. 50KB PNG 아이콘이 어떤 크기에서든 완벽하게 보이는 3KB SVG가 돼.

기존 SVG도 보통 최적화할 수 있어. 대부분의 디자인 도구가 불필요한 메타데이터, 불필요한 정밀도, 숨겨진 레이어가 포함된 SVG를 내보내. 옵티마이저로 돌리면 보통 파일 크기가 30-60% 줄어.

SVG를 최적화해서 추가 바이트를 줄여봐.

빠른 감사 체크리스트

최적화하려는 페이지에 대해 이걸 확인해:

1. 먼저 측정 — Lighthouse나 PageSpeed Insights로 현재 점수 확인
2. 이미지 크기 확인 — 표시 크기보다 넓은 이미지가 있어?
3. 포맷 확인 — 가능한 곳에서 WebP를 쓰고 있어?
4. 압축 확인 — 이미지를 압축기에 돌려봐
5. 치수 확인 — 모든 <img>에 width와 height가 있어?
6. 지연 로드 확인 — 스크롤 아래 이미지가 지연 로드되고 있어?
7. 다시 측정 — 새 점수를 비교해봐

---

이미지 최적화는 화려한 작업이 아니지만 할 수 있는 가장 영향이 큰 성능 개선이야. 대부분의 페이지가 적절한 크기로 압축된 이미지를 현대 포맷으로 제공하는 것만으로 로드 시간을 절반으로 줄일 수 있어. 가장 무거운 페이지부터 시작해서 내려가면 돼.