이미지 SEO: alt 텍스트·WebP·Lazy Loading 완전 가이드

이미지는 웹페이지에서 가장 무거운 리소스 중 하나이면서, 동시에 거대한 트래픽 소스입니다. HTTP Archive에 따르면 평균 웹페이지 전체 용량의 약 50%를 이미지가 차지합니다. 최적화되지 않은 이미지는 SEO에서 두 가지 문제를 동시에 야기합니다.

alt 텍스트(대체 텍스트)는 이미지를 텍스트로 설명하는 HTML 속성입니다. 이미지를 볼 수 없는 사용자(스크린 리더)와 검색엔진 봇 모두를 위한 필수 요소입니다. 또한, 이미지가 링크로 사용될 때 alt 텍스트는 앵커 텍스트 역할을 합니다.

상황별 alt 텍스트 작성법

alt 텍스트 작성 규칙

1. 125자 이내로 작성 (스크린 리더가 125자에서 끊는 경우 있음)
2. "이미지 of", "사진 of"로 시작하지 않기 - 스크린 리더가 이미 "이미지"라고 안내함
3. 키워드 스터핑 금지 - "SEO SEO 최적화 SEO 가이드" 식으로 같은 키워드 반복하지 않기
4. 각 이미지마다 고유하게 작성 - 모든 이미지에 동일한 alt 텍스트는 금지
5. 맥락에 맞게 작성 - 같은 이미지라도 사용 맥락에 따라 alt가 달라야 함

올바른 이미지 포맷을 선택하면 파일 크기를 대폭 줄이면서도 시각적 품질을 유지할 수 있습니다.

최적 포맷 선택 플로우

이미지 유형 판단
├── 벡터 그래픽 (로고, 아이콘) → SVG
├── 애니메이션 → WebP 애니메이션 (또는 동영상)
└── 래스터 이미지 (사진, 스크린샷)
    ├── 투명도 필요 → WebP / PNG (fallback)
    └── 투명도 불필요
        ├── AVIF 지원 가능 → AVIF (최소 용량)
        └── 범용 지원 → WebP > JPG (fallback)

<picture> 태그로 포맷별 fallback 제공

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="SEO 전략 다이어그램" width="800" height="450">
</picture>

브라우저가 지원하는 가장 효율적인 포맷을 자동으로 선택합니다.

Lazy Loading (지연 로딩)

스크롤해야만 보이는 이미지는 처음부터 로드할 필요가 없습니다. Lazy Loading을 사용하면 초기 페이지 로드를 크게 단축시키고, LCP 점수를 개선합니다.

<!-- 스크롤 아래 이미지: Lazy Loading -->
<img src="photo.webp" alt="SEO 가이드 이미지"
     loading="lazy" width="800" height="450" />

<!-- LCP 요소(상단 첫 이미지): 즉시 로드 -->
<img src="hero.webp" alt="메인 배너"
     loading="eager" fetchpriority="high" width="1200" height="600" />

이미지 로딩 최적화 핵심 규칙

반응형 이미지(srcset) 예시

<img src="seo-guide-800.webp"
     srcset="seo-guide-400.webp 400w,
             seo-guide-800.webp 800w,
             seo-guide-1200.webp 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1024px) 800px,
            1200px"
     alt="SEO 가이드 인포그래픽"
     loading="lazy" width="1200" height="675" />

이미지 파일명 최적화

Google은 이미지 파일명을 이미지 내용 이해의 추가 신호로 사용합니다.

이미지 사이트맵

이미지 사이트맵은 Google에 이미지의 존재와 위치를 알려주는 별도의 사이트맵입니다. 특히 JavaScript로 로드되는 이미지, CSS 배경 이미지 등 크롤러가 발견하기 어려운 이미지에 효과적입니다.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>https://example.com/seo-guide</loc>
    <image:image>
      <image:loc>https://example.com/images/seo-infographic.webp</image:loc>
      <image:title>SEO 프로세스 인포그래픽</image:title>
    </image:image>
  </url>
</urlset>

현대 프레임워크에서는 이미지 최적화가 빌트인으로 제공됩니다.

Next.js Image 컴포넌트 예시

import Image from 'next/image';

// LCP 이미지: priority=true (fetchpriority="high" 자동)
<Image
  src="/hero-banner.jpg"
  alt="SEO 완전 가이드 히어로 이미지"
  width={1200}
  height={600}
  priority
/>

// 일반 이미지: 자동 Lazy Loading
<Image
  src="/chart.png"
  alt="오가닉 트래픽 성장 차트"
  width={800}
  height={450}
/>