첫 화면 이미지 최적화: 지연 로딩, 우선순위, 크기 지정

핵심 요약

첫 화면에 보이는 이미지는 일반적으로 loading="lazy"를 빼고 기본값(eager)으로 둡니다. 다만 실제 LCP와 브라우저의 리소스 우선순위를 측정해 확인하세요. 첫 화면 이미지 중 가장 큰 이미지에는 fetchpriority="high"를 넣어 브라우저에 중요도를 알리세요. 모든 이미지에는 width와 height를 지정하거나 CSS aspect-ratio로 공간을 확보해 레이아웃이 흔들리지 않도록 합니다. 이 세 가지가 Core Web Vitals의 LCP(Largest Contentful Paint)와 CLS(Cumulative Layout Shift)에 영향을 주는 이미지 설정입니다.

LCP와 CLS가 이미지와 만나는 지점

LCP: 가장 큰 콘텐츠가 그려지는 시점

LCP는 뷰포트 안의 주요 콘텐츠가 화면에 나타나는 시점을 살펴보는 지표입니다. 페이지 상단의 큰 배너 이미지는 LCP 요소 후보가 될 수 있습니다. 실제 측정 대상은 페이지마다 다르므로 이미지 다운로드 시간만으로 LCP를 판단하지 말고 브라우저에서 해당 요소와 표시 시점을 확인하세요.

CLS: 레이아웃이 밀리는 정도

CLS는 예상치 못한 레이아웃 이동을 살펴보는 지표입니다. 이미지가 차지할 공간을 미리 확보하지 않으면 이미지 표시 후 아래쪽 텍스트와 버튼이 밀릴 수 있습니다. HTML의 width와 height로 원본 비율을 알려 주고, CSS에서도 그 비율과 표시 크기가 맞는지 확인하세요.

지연 로딩(loading=“lazy”)의 올바른 범위

loading="lazy"는 화면 밖에 있는 이미지에 적용하는 것이 좋습니다. 첫 화면 이미지에 사용하면 브라우저가 위치를 판단하는 과정 때문에 로딩이 늦어질 수 있습니다. 그렇다고 lazy를 붙인 첫 화면 이미지가 스크롤해야만 로딩된다는 뜻은 아닙니다. web.dev의 지연 로딩 안내는 첫 화면 이미지, 특히 LCP 이미지에는 기본값인 eager 로딩을 유지하라고 설명합니다.

실무에서 흔한 실수는 CMS 템플릿이나 컴포넌트 라이브러리가 모든 <img>에 일괄적으로 loading="lazy"를 붙이는 경우입니다. 첫 번째 이미지가 로고든 히어로 배너든, 화면에 바로 보이는 이미지라면 일반적으로 lazy를 빼고 실제 LCP와 로딩 우선순위를 측정해 확인하세요.

<!-- 잘못된 예: 첫 화면 히어로 이미지에 lazy -->
<img src="/hero.webp" loading="lazy" alt="메인 배너" width="1200" height="600" />

<!-- 올바른 예: lazy 제거, 우선순위 지정 -->
<img src="/hero.webp" fetchpriority="high" alt="메인 배너" width="1200" height="600" />

스크롤해야 보이는 이미지에는 loading="lazy"를 적극적으로 쓰세요. 첫 화면의 대역폭을 아껴 LCP를 앞당기는 효과가 있습니다.

fetchpriority=“high”로 LCP 이미지 앞당기기

fetchpriority 속성은 브라우저에 리소스의 상대적인 우선순위 힌트를 줍니다. LCP 이미지에 fetchpriority="high"를 붙여 중요도를 알릴 수 있지만, 다른 모든 리소스보다 먼저 요청된다는 보장은 아닙니다. HTML 파싱이 끝나야만 이미지 요청이 시작되는 것도 아닙니다.

web.dev의 Fetch Priority 안내에는 Google Flights 팀이 LCP를 2.6초에서 1.9초로 단축한 사례가 있습니다. 이 수치를 다른 사이트의 예상 개선 폭으로 쓰지는 마세요. 우선 실제 LCP 이미지에 적용해 측정하고, 모든 이미지에 일괄적으로 high를 붙이지 않는 것이 좋습니다. 페이지당 하나만 허용되는 속성은 아닙니다.

상황	loading	fetchpriority
히어로 배너(LCP 후보)	생략(기본 eager)	high
첫 화면의 보조 이미지	생략(기본 eager)	생략
스크롤 아래 갤러리 이미지	lazy	생략
스크롤 아래 장식 이미지	lazy	low

width·height 지정으로 CLS 방지

모든 <img>에 width와 height 속성을 넣으면 브라우저가 이미지 다운로드 전에 공간을 확보합니다. HTML 속성을 쓰지 않는다면 CSS의 aspect-ratio로 필요한 공간을 예약할 수도 있습니다. web.dev의 CLS 최적화 안내는 이미지와 동영상에 width·height를 포함하거나 CSS aspect-ratio로 공간을 예약하라고 권합니다.

<!-- 잘못된 예: 크기 미지정 -->
<img src="/product.webp" alt="상품 사진" />

<!-- 올바른 예: 원본 비율에 맞는 크기 지정 -->
<img src="/product.webp" alt="상품 사진" width="800" height="600" />

CSS에서 max-width: 100%; height: auto;를 걸어 두면 width·height가 고정 크기가 아니라 비율 힌트로 동작합니다. 반응형 이미지에서도 CLS를 막으면서 화면에 맞게 줄어듭니다.

img {
  max-width: 100%;
  height: auto;
}

로고와 아이콘의 무손실 최적화

로고, 아이콘, 일러스트처럼 색이 적고 선이 명확한 이미지는 SVG부터 검토하세요. 실제 파일을 비교해 더 선명하고 작은 형식을 선택하고, SVG를 쓸 수 없는 환경이면 PNG의 색상 수와 용량을 조정하세요.

래스터 로고는 실제 표시 환경에서 선명도를 확인하고 표시 크기에 맞춰 width·height를 지정하세요. 로고가 화면 상단에 바로 보인다면 다른 첫 화면 이미지와 마찬가지로 loading="lazy"를 빼세요.

차세대 이미지 포맷: WebP와 AVIF

WebP와 AVIF를 적용할 때는 실제 이미지로 변환 결과를 비교하세요. 원본의 특성과 품질 설정에 따라 용량과 선명도가 달라지므로 일정한 절감률을 가정하지 않는 것이 좋습니다. 아래는 <picture>로 포맷별 대체 경로를 마련하는 예시입니다.

<picture>
  <source srcset="/hero.avif" type="image/avif" />
  <source srcset="/hero.webp" type="image/webp" />
  <img src="/hero.jpg" alt="메인 배너" width="1200" height="600" fetchpriority="high" />
</picture>

브라우저는 위에서 아래로 지원하는 첫 번째 소스를 사용하고, 어느 것도 안 되면 <img>의 JPEG로 돌아갑니다. width, height, fetchpriority, alt는 <img>에 그대로 둡니다. <source>에 loading이나 fetchpriority를 넣는 것은 표준이 아니므로 피하세요.

이미지 변환 후에는 배경색을 바꿔 투명 영역과 테두리가 의도대로 보이는지 확인하세요. 투명도 보존과 무손실 압축은 별개의 속성이므로, 투명 배경이 필요하다는 이유만으로 무손실 모드가 필수라고 판단하지 마세요.

alt 텍스트와 접근성

alt 속성은 이미지가 로딩되지 않거나 스크린 리더가 읽을 때 쓰는 대체 텍스트입니다. 빈 값(alt="")은 장식용 이미지에만 쓰고, 콘텐츠 이미지에는 해당 이미지가 전달하는 정보를 짧게 적으세요.

<!-- 콘텐츠 이미지: 정보를 전달 -->
<img src="/chart.webp" alt="2026년 3분기 매출 추이 그래프" width="960" height="540" />

<!-- 장식 이미지: 정보 없음 -->
<img src="/divider.svg" alt="" width="800" height="2" />

키워드를 억지로 채우지 말고 이미지가 전달하는 내용을 정확히 쓰세요. 장식 이미지는 빈 alt로 보조 기술이 건너뛰게 합니다.

애드브랜치 검사기가 확인하는 항목

first-image-lazy-loading

문서에서 처음 만나는 <img> 태그에 loading="lazy"가 있으면 경고(warning)를 표시합니다. 점수에는 반영되지 않는 참고 항목입니다. 첫 번째 이미지가 로고처럼 면적이 작은 경우에도 경고가 뜰 수 있는데, 로고라도 화면 상단에 즉시 표시돼야 하므로 lazy를 빼는 것이 맞습니다. 다만 페이지 구조에 따라 첫 <img>가 실제 LCP 후보가 아닐 수도 있으므로, 경고가 곧 성능 문제를 뜻하는 것은 아닙니다. 실제 LCP 요소는 브라우저 DevTools의 Performance 패널이나 Lighthouse에서 확인하세요.

image-dimensions

<img> 태그 가운데 width와 height 속성이 모두 있는 비율을 확인합니다. 90% 이상이면 pass이고, 그보다 낮으면 누락된 이미지 수와 함께 warning을 표시합니다. 실제 이미지 비율과 속성 값이 일치하는지는 확인하지 않습니다.

image-alt-missing

<img> 태그에 alt 속성이 아예 없는 경우를 잡아냅니다. alt=""(빈 값)은 통과하고, 속성 자체가 없는 것만 경고합니다. 이 규칙만으로 이미지가 실제로 장식용인지는 판정하지 않습니다.

실전 체크리스트

아래 순서로 점검하면 빠뜨림 없이 이미지를 최적화할 수 있습니다.

1. 첫 화면에 보이는 이미지에서 일반적으로 loading="lazy"를 제거하고 실제 LCP와 로딩 우선순위를 확인합니다.
2. LCP 후보(뷰포트에서 가장 큰 이미지) 하나에 fetchpriority="high"를 추가합니다.
3. 모든 <img>에 width와 height를 원본 비율에 맞게 지정합니다.
4. CSS에 img { max-width: 100%; height: auto; }를 넣어 반응형 대응을 확인합니다.
5. 콘텐츠 이미지에 alt 텍스트를 적고, 장식 이미지에는 alt=""를 둡니다.
6. 가능한 경우 <picture>로 WebP·AVIF 대체 소스를 추가합니다.
7. DevTools Lighthouse로 LCP, CLS 점수를 확인하고, 검사기에서 first-image-lazy-loading, image-dimensions, image-alt-missing 결과를 봅니다.

자주 묻는 질문

loading=“lazy”를 모든 이미지에 넣으면 안 되나요

일반적으로 권장하지 않습니다. 첫 화면에 보이는 이미지에 lazy를 넣으면 브라우저가 이미지 위치를 판단할 때까지 요청이 미뤄져 LCP가 느려질 수 있습니다. 다만 실제 LCP와 브라우저의 로딩 동작을 측정해 확인하고, lazy는 주로 스크롤해야 보이는 이미지에 적용하세요. CMS나 프레임워크가 자동으로 lazy를 붙이는 경우 첫 화면 이미지를 예외 처리하는 옵션이 있는지 확인하세요.

fetchpriority=“high”를 여러 이미지에 넣으면 어떻게 되나요

여러 이미지에 지정할 수 있지만 모든 이미지를 중요하다고 표시하면 우선순위를 구분하기 어렵습니다. 실제 LCP 이미지부터 적용하고 네트워크 요청과 표시 시간을 비교하세요. 첫 화면에 이미지가 여러 장 있다는 이유만으로 모두 high로 바꿀 필요는 없습니다.

width·height를 CSS로만 잡아도 CLS를 막을 수 있나요

CSS의 aspect-ratio 속성을 직접 선언하면 HTML 속성 없이도 비율을 잡을 수 있습니다. 그러나 CSS가 로딩되기 전이나 적용되지 않는 환경에서는 비율 정보가 없어 레이아웃이 흔들릴 수 있습니다. HTML의 width·height는 CSS 로딩과 무관하게 브라우저가 즉시 읽으므로 가장 안정적입니다. 둘 다 넣는 것이 이상적이고, 하나만 선택해야 한다면 HTML 속성을 우선하세요.

관련 가이드

• SEO 기본 점검 체크리스트
• GEO 점검 체크리스트
• heading 구조 가이드
• 구조화 데이터(JSON-LD) 적용 가이드