# [[Image Optimization]]

## 📌 Brief Summary
이미지 최적화(Image Optimization)는 시각적 품질의 저하 없이 이미지의 파일 크기를 줄이고 웹페이지 로딩 속도를 향상시키는 핵심 웹 성능 최적화 전략입니다 [1, 2]. 2025년 현대 웹 아키텍처에서 이는 코어 웹 바이탈(Core Web Vitals)의 주요 지표인 LCP(Largest Contentful Paint)와 CLS(Cumulative Layout Shift)를 개선하는 데 직접적인 영향을 미칩니다 [3, 4]. 차세대 포맷 채택, 반응형 크기 조정, 전략적인 지연 로딩(Lazy Loading), 접근성을 위한 대체 텍스트 제공 등을 포괄합니다 [5-7].

## 📖 Core Content
*   **차세대 포맷 채택 및 압축:** 무거운 PNG나 JPEG 대신 WebP 및 AVIF와 같은 차세대 이미지 포맷을 사용해야 합니다 [7-10]. WebP는 JPEG보다 약 30%, AVIF는 50% 더 작은 파일 크기를 제공합니다 [2]. TinyPNG, Squoosh, ImageOptim, Sharp와 같은 최적화 도구를 활용하여 화질 손실 없이 파일(SVG 포함)을 압축하는 것이 권장됩니다 [1, 2, 9]. 사진 대신 일러스트레이션을 사용하는 것도 파일 크기를 줄이는 효과적인 대안이 될 수 있습니다 [11].
*   **LCP 최적화 및 히어로 이미지 처리:** 용량이 크고 최적화되지 않은 이미지는 LCP 성능 저하의 주된 원인입니다 [12, 13]. 초기 화면(Above-the-fold)에 나타나는 가장 중요한 히어로 이미지에는 지연 로딩(Lazy loading)을 적용하면 성능이 악화되므로 피해야 합니다 [14]. 대신 `loading="eager"` 속성을 사용하거나 `fetchpriority="high"`를 통해 브라우저가 LCP 이미지를 우선적으로 로드(Preload)하도록 지시해야 합니다 [2, 10, 15].
*   **지연 로딩(Lazy Loading) 적용:** 사용자가 스크롤해야 볼 수 있는 화면 아래(Below-the-fold)의 비핵심 이미지에 대해서는 지연 로딩을 구현하여 초기 페이지 로딩 속도를 높이고 불필요한 네트워크 대역폭 소비를 줄여야 합니다 [4, 5, 7, 10].
*   **레이아웃 안정성(CLS) 확보:** 이미지가 로드되는 동안 발생하는 예기치 않은 레이아웃 전환(Layout Shift)을 방지하려면, HTML 또는 CSS에 이미지의 명시적인 너비(width)와 높이(height) 속성이나 종횡비(aspect-ratio)를 항상 설정하여 브라우저가 미리 공간을 확보할 수 있게 해야 합니다 [16-18].
*   **반응형 크기 조정:** 모바일 우선(Mobile-First) 디자인 원칙에 따라, 기기 해상도와 화면 크기에 맞춰 적절한 이미지를 제공할 수 있도록 `<picture>` 요소와 `srcset` 속성을 활용해야 합니다 [5, 7, 10, 19]. 300픽셀 컨테이너에 4K 해상도 이미지를 로드하는 것과 같은 리소스 낭비를 피해야 합니다 [9].
*   **웹 접근성(WCAG) 준수:** 시각 장애가 있는 사용자나 스크린 리더 사용자를 위해 의미 있는 모든 이미지에는 시각적 콘텐츠를 명확히 설명하는 대체 텍스트(Alt text)를 제공해야 합니다 [6, 20, 21].

## 🔗 Knowledge Connections
- **Related Topics:** `[[Core Web Vitals]]`, `[[Largest Contentful Paint (LCP)]]`, `[[Cumulative Layout Shift (CLS)]]`, `[[Lazy Loading]]`, `[[Web Accessibility (WCAG)]]`
- **Projects/Contexts:** `[[E-commerce Migration to Next.js]]` (Next.js의 Image 컴포넌트와 WebP를 활용해 1만 개 제품 이미지의 로딩과 코어 웹 바이탈을 성공적으로 개선한 사례 [22]), `[[Performance Budgets]]` (성능 예산 설정 시 모바일 기기의 이미지 크기 한도를 500KB 등으로 제한하는 맥락 [23])
- **Contradictions/Notes:** 소스 전반에 걸쳐 일반적인 이미지 자산에는 로딩 속도를 위해 지연 로딩(Lazy Loading)이 필수적이라고 권장하지만, 초기 뷰포트에 위치한 중요한 LCP 이미지에 지연 로딩을 적용하는 것은 LCP 점수를 심각하게 훼손하는 '가장 흔한 실수'이므로 반드시 즉시 로드(Eager load)해야 한다고 주의를 줍니다 [10, 14].

---
*Last updated: 2026-04-26*