July 3, 2025

🖼️🐢 미적용 이미지 최적화: Core Web Vitals의 저해

HTML

성능

빌드&번들링

웹표준

SEO/접근성

캐싱전략

Summary

불필요하게 큰 이미지 파일, 비효율적인 형식, 반응형 이미지 미적용, 지연 로딩 부재는 웹 성능 저하와 Core Web Vitals 점수를 낮추는 주범입니다. WebP/AVIF, srcset/sizes, loading="lazy", rel="preload" 등의 최적화 기법을 적용하여 빠르고 효율적인 이미지 로딩을 구현해야 합니다.

Why Wrong?

웹 페이지에 최적화되지 않은 이미지를 사용하면 사용자 경험과 웹 성능에 심각한 악영향을 미칩니다. 특히 이미지의 과도한 파일 크기, 비효율적인 형식(JPG, PNG 대신 WebP, AVIF 등), 반응형 이미지 미적용, 그리고 지연 로딩(Lazy Loading)의 부재는 다음과 같은 문제를 야기합니다:

느린 로딩 속도: 이미지는 웹 페이지 전체 용량의 상당 부분을 차지하는 경우가 많습니다. 최적화되지 않은 이미지는 다운로드 시간을 길게 만들어 페이지 로딩을 지연시키고, 사용자에게 답답함을 줍니다.
Core Web Vitals 저해: 특히 '가장 큰 콘텐츠 페인트(Largest Contentful Paint, LCP)' 지표에 직접적인 영향을 미칩니다. LCP는 뷰포트 내 가장 큰 콘텐츠 요소가 렌더링되는 시간을 측정하는데, 큰 이미지는 이 시간을 늘려 검색 엔진 순위 및 사용자 경험 점수를 낮춥니다.
네트워크 대역폭 낭비: 사용자의 기기(모바일 등)에 관계없이 항상 가장 큰 이미지를 다운로드하게 하여 불필요한 데이터 소모와 네트워크 자원 낭비를 초래합니다.
CLS (Cumulative Layout Shift) 발생 가능성: 이미지의 width와 height 속성이 명시되지 않아 이미지가 로딩된 후 레이아웃이 밀리는 현상(CLS)이 발생할 수 있습니다. 이는 사용자 경험을 방해하는 주요 요소 중 하나입니다.
서버 비용 증가: 불필요하게 큰 이미지는 서버 트래픽 증가로 이어져 호스팅 비용을 증가시킬 수 있습니다.

How to Fix?

이미지 최적화는 웹 성능 개선의 핵심 요소입니다. 다음 전략들을 통해 효과적인 이미지 로딩을 구현할 수 있습니다:

적절한 이미지 형식 사용: JPG, PNG 대신 WebP, AVIF와 같은 현대적이고 효율적인 이미지 형식을 우선적으로 고려합니다. 이 형식들은 더 작은 파일 크기로 더 나은 압축률과 품질을 제공합니다.
반응형 이미지 구현: <picture> 요소와 srcset, sizes 속성을 활용하여 사용자 기기의 뷰포트 크기에 따라 최적화된 이미지를 제공합니다. 이는 불필요한 다운로드를 방지하고 대역폭을 절약합니다.
지연 로딩 (Lazy Loading): 뷰포트 밖에 있는 이미지는 loading="lazy" 속성을 사용하여 사용자가 스크롤하여 해당 이미지가 뷰포트에 들어올 때만 로드되도록 합니다. 이는 초기 페이지 로딩 속도를 크게 향상시킵니다.
LCP 이미지 미리 로드 (Preloading): 페이지에서 가장 큰 콘텐츠(주로 히어로 이미지)로 식별된 이미지는 <link rel="preload" href="..." as="image">를 <head>에 추가하여 브라우저가 다른 리소스보다 먼저 로드하도록 지시합니다. 이는 LCP를 개선하는 데 중요합니다.
이미지 크기 명시: <img> 태그에 width와 height 속성을 명시하여 이미지가 로드되기 전에도 브라우저가 이미지의 공간을 미리 확보하게 하여 CLS를 방지합니다.
이미지 압축 및 최적화 도구 사용: 이미지 편집 소프트웨어, 온라인 최적화 도구(TinyPNG, Squoosh 등), 또는 빌드 도구(webpack의 image-minimizer-webpack-plugin 등)를 사용하여 이미지를 최적의 품질과 크기로 압축합니다.
CDN (Content Delivery Network) 활용: 이미지 CDN을 사용하여 사용자와 지리적으로 가까운 서버에서 이미지를 제공하고, 이미지 포맷 변환, 크기 조절, 캐싱 등을 자동으로 처리하도록 합니다.

Before Code (Bad)

```html
<!-- 최적화되지 않은 이미지 로딩 예시 -->
<img src="./large-unoptimized-hero-image.jpg" alt="아름다운 풍경 사진" style="max-width: 100%;">

<div style="height: 1000px;">스크롤해야 보이는 콘텐츠</div>

<img src="./another-large-image-below-fold.png" alt="바닷가 풍경">
```

**문제점:**
*   `large-unoptimized-hero-image.jpg`는 위쪽에 있어 LCP에 직접적인 영향을 주지만, 최적화되지 않은 크기와 포맷으로 인해 로딩이 지연될 수 있습니다.
*   `another-large-image-below-fold.png`는 뷰포트 아래에 있지만 즉시 로드되어 초기 로딩 성능에 불필요한 부담을 줍니다.
*   두 이미지 모두 `width`와 `height` 속성이 없어 CLS를 유발할 수 있습니다.
*   반응형 이미지를 위한 `srcset`/`sizes`가 없어 모든 사용자에게 동일한 크기의 이미지를 제공합니다.

After Code (Good)

```html
<!-- 최적화된 이미지 로딩 예시 -->
<head>
    <!-- LCP 이미지 미리 로드: 뷰포트 내 가장 큰 이미지는 빠르게 로드되도록 우선순위를 높여줍니다. -->
    <link rel="preload" fetchpriority="high" as="image" href="./optimized-hero-image.webp" type="image/webp">
</head>
<body>
    <!-- 반응형 및 최적화된 히어로 이미지 -->
    <picture>
        <!-- WebP 지원 브라우저 -->
        <source srcset="./optimized-hero-image.webp 1x, ./optimized-hero-image@2x.webp 2x" type="image/webp">
        <!-- JPG 폴백: 다른 브라우저용 -->
        <img src="./optimized-hero-image.jpg" 
             srcset="./optimized-hero-image.jpg 1x, ./optimized-hero-image@2x.jpg 2x" 
             alt="아름다운 풍경 사진" 
             width="1200" height="800" 
             loading="eager"> <!-- LCP 이미지이므로 'eager' (기본값) -->
    </picture>

    <div style="height: 1000px;">스크롤해야 보이는 콘텐츠</div>

    <!-- 뷰포트 아래 이미지 지연 로드 (Lazy Loading) -->
    <picture>
        <source srcset="./optimized-beach-image.webp 1x, ./optimized-beach-image@2x.webp 2x" type="image/webp">
        <img src="./optimized-beach-image.jpg" 
             srcset="./optimized-beach-image.jpg 1x, ./optimized-beach-image@2x.jpg 2x" 
             alt="바닷가 풍경" 
             width="800" height="600" 
             loading="lazy"> <!-- 뷰포트 밖에 있으므로 'lazy' -->
    </picture>
</body>
```

**개선점:**
*   `optimized-hero-image.webp`를 `preload`하여 LCP 성능을 극대화합니다.
*   `<picture>`와 `srcset`을 사용하여 브라우저가 최적의 이미지 형식(WebP)과 해상도를 선택하게 합니다.
*   `width`와 `height`를 명시하여 CLS를 방지하고 레이아웃 안정성을 확보합니다.
*   `loading="lazy"`를 사용하여 뷰포트 아래의 이미지는 필요할 때만 로드되도록 합니다. 이는 초기 로딩 성능과 대역폭 사용량을 줄여줍니다.
*   이미지 파일 자체를 압축하고, WebP/AVIF와 같은 효율적인 포맷으로 변환하여 파일 크기를 최소화해야 합니다. (코드 예시에서는 파일명으로 표현)

`<img>` 요소의 `loading` 속성에 대한 공식 문서로, 지연 로딩(`lazy`)을 통해 초기 페이지 로드 성능을 최적화하는 방법을 설명합니다.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading

반응형 이미지 구현을 위한 `srcset`과 `sizes` 속성 및 `<picture>` 요소 사용법에 대한 MDN 문서로, 다양한 기기 환경에서 최적의 이미지 로드를 가능하게 합니다.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset

브라우저가 리소스를 미리 로드하여 성능을 개선하는 `rel="preload"`에 대한 MDN 문서로, 특히 LCP에 중요한 이미지를 빠르게 표시하는 데 유용합니다.

https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload

Core Web Vitals의 핵심 지표 중 하나인 Largest Contentful Paint (LCP)에 대한 개발자 문서로, 이미지 최적화가 LCP에 미치는 영향과 개선 전략을 설명합니다.

https://web.dev/lcp/