이 글에서 배울 수 있는 것
- ✓ 구글 이미지 검색이 트래픽에 기여하는 실제 비중
- ✓ alt 텍스트 올바른 작성법과 잘못된 예시 비교
- ✓ WebP·AVIF 포맷 전환과 파일명 최적화 방법
- ✓ LCP를 해치지 않는 지연 로딩(lazy loading) 올바른 적용법
- ✓ 이미지 사이트맵과 구조화 데이터 적용 기준
① 이미지 SEO가 중요한 이유
이미지는 평균적으로 한 페이지 전체 용량의 50% 이상을 차지하면서도, 텍스트 SEO에 비해 가장 방치되는 영역입니다. 이미지 SEO는 두 가지 축에서 효과를 냅니다.
| 축 | 효과 |
|---|---|
| 구글 이미지 검색 노출 | 제품·인테리어·음식 등 시각 중심 검색에서 별도 트래픽 채널 확보 |
| 페이지 속도(Core Web Vitals) | 이미지 최적화만으로 LCP가 가장 크게 개선됨 |
특히 쇼핑몰, 인테리어·뷰티 업종, 음식점처럼 시각적 정보가 구매 결정에 큰 영향을 주는 업종일수록 이미지 SEO의 효과가 큽니다.
② alt 텍스트 작성법
alt 속성은 이미지가 로드되지 않거나 화면을 읽지 못하는 사용자(스크린 리더 이용자 등)에게 이미지 내용을 텍스트로 전달하는 역할을 합니다. 구글은 이 텍스트를 이미지 검색 색인과 페이지 주제 파악에도 활용합니다.
좋은 alt 텍스트 vs. 나쁜 alt 텍스트
✅ 좋은 예시
alt="강남역 카페 알아서랑지의 시그니처 라떼와 크로플"
→ 구체적 묘사 + 자연스러운 키워드 포함
❌ 나쁜 예시
alt="카페 강남 카페추천 강남카페 라떼 디저트 맛집"
→ 키워드 나열 — 스팸으로 분류될 위험
alt 텍스트 작성 규칙
- 이미지를 못 보는 사람도 내용을 이해할 수 있도록 구체적으로 묘사
- 125자 이내로 간결하게 작성 (스크린 리더가 너무 길면 일부만 읽음)
- "이미지", "사진" 같은 단어는 불필요 (스크린 리더가 이미 이미지로 인식)
- 장식용 이미지(아이콘, 구분선 등)는
alt=""로 비워두기 — 빈 alt도 올바른 사용법 - 같은 페이지의 여러 이미지에 동일한 alt 텍스트 반복 금지
③ 파일명·포맷 최적화
파일명 규칙
✅ 좋은 파일명
gangnam-cafe-latte-croffle.jpg
❌ 나쁜 파일명
IMG_20260628_001.jpg
파일명은 하이픈(-)으로 단어를 구분하고, 이미지 내용을 영문 키워드로 설명하세요. 언더스코어(_)보다 하이픈을 구글이 더 명확하게 단어 구분자로 인식합니다.
이미지 포맷 비교
| 포맷 | 용량 | 화질 | 권장 용도 |
|---|---|---|---|
| JPEG | 중간 | 양호 (손실 압축) | 사진 (구형 호환성 필요시) |
| PNG | 큼 | 최상 (무손실) | 투명 배경, 로고, 아이콘 |
| WebP | 작음 (JPEG 대비 25~35%↓) | 양호~최상 | 대부분의 웹 이미지 — 현재 권장 기본값 |
| AVIF | 가장 작음 | 최상 | 최신 브라우저 대상, 점진적 도입 |
구형 브라우저 호환 — picture 태그 활용
브라우저가 AVIF를 지원하면 AVIF를, 안 되면 WebP를, 둘 다 안 되면 기본 JPEG를 자동으로 선택해 로드합니다.
④ 이미지 속도 최적화 — 지연 로딩의 함정
지연 로딩(Lazy Loading)이란
화면에 보이지 않는 이미지의 로딩을 사용자가 스크롤해서 해당 위치에 도달할 때까지 미루는 기법입니다. loading="lazy" 속성 하나로 적용할 수 있습니다.
⚠️ 첫 화면 이미지에는 절대 적용 금지
스크롤 없이 바로 보이는 첫 화면(Above the Fold) 이미지에 lazy loading을 적용하면 LCP가 오히려 느려집니다. 첫 화면 이미지는 즉시 로드되어야 하므로 lazy 속성을 빼고, 대신 fetchpriority="high"를 추가해 우선순위를 높이세요.
width·height 속성 — CLS 방지 필수
이미지에 width·height 속성을 명시하지 않으면, 이미지가 로드되는 순간 레이아웃이 갑자기 밀리는 현상(레이아웃 시프트)이 발생해 CLS(누적 레이아웃 이동) 점수가 나빠집니다. 실제 이미지 비율과 동일한 width·height를 항상 지정하세요.
반응형 이미지 — srcset으로 기기별 크기 분배
모바일에 PC용 대형 이미지를 그대로 전송하면 불필요한 용량 낭비가 발생합니다. srcset과 sizes로 화면 크기에 맞는 이미지를 자동 선택하게 하세요.
⑤ 이미지 구조화 데이터·사이트맵
이미지 사이트맵
중요 이미지가 많은 사이트(쇼핑몰, 포트폴리오 등)는 XML 사이트맵에 이미지 정보를 함께 포함시켜 구글의 이미지 색인을 도울 수 있습니다.
Product 스키마와 이미지 연결
쇼핑몰이라면 Product 구조화 데이터의 image 필드에 고해상도 상품 이미지 URL을 명시하세요. 구글 쇼핑 탭과 이미지 검색 노출에 함께 활용됩니다.
캡션과 주변 텍스트도 중요
이미지 바로 위·아래에 있는 설명 텍스트(캡션, figcaption)도 구글이 이미지 내용을 이해하는 데 참고합니다. <figure><img><figcaption> 구조를 활용하면 alt 텍스트와 함께 이중으로 맥락을 제공할 수 있습니다.
⑥ 이미지 SEO 실전 체크리스트
- ☐ 모든 이미지에 구체적이고 자연스러운 alt 텍스트 작성
- ☐ 장식용 이미지는 alt="" 처리
- ☐ 파일명을 하이픈 기반 키워드로 변경 (IMG_001.jpg 금지)
- ☐ JPEG·PNG → WebP(또는 AVIF) 포맷 전환
- ☐ 모든 img 태그에 width·height 속성 명시 (CLS 방지)
- ☐ 첫 화면 이미지는 fetchpriority="high", 그 외는 loading="lazy"
- ☐ 반응형 이미지 — srcset·sizes로 기기별 용량 최적화
- ☐ 쇼핑몰·포트폴리오는 이미지 사이트맵 또는 Product 스키마 적용
- ☐ Google Search Console → 이미지 검색 실적 보고서 정기 점검
⑦ 자주 묻는 질문 (FAQ)
alt 텍스트에 키워드를 꼭 넣어야 하나요?
키워드를 억지로 넣기보다, 이미지를 보지 못하는 사용자가 내용을 이해할 수 있도록 자연스럽게 묘사하는 것이 우선입니다. 그 설명 안에 관련 키워드가 자연스럽게 들어가면 가장 좋습니다. 키워드만 나열하는 alt 텍스트는 구글 가이드라인 위반으로 간주되어 스팸으로 분류될 수 있습니다.
이미지를 WebP로 바꾸면 정말 속도가 빨라지나요?
네, 일반적으로 JPEG보다 25~35%, PNG보다는 더 큰 비율로 파일 용량이 줄어듭니다. 같은 화질 기준으로 용량이 작아지므로 LCP(최대 콘텐츠풀 페인트) 개선에 직접적인 효과가 있습니다. 다만 일부 구형 브라우저 호환성을 위해 picture 태그로 WebP와 기존 포맷을 함께 제공하는 것이 안전합니다.
지연 로딩(lazy loading)을 모든 이미지에 적용해도 되나요?
아닙니다. 페이지 첫 화면에 있는 이미지에는 지연 로딩을 적용하면 안 됩니다. 오히려 LCP가 느려지는 역효과가 발생합니다. 첫 화면 이미지는 loading="eager"와 fetchpriority="high"를 사용하고, 스크롤 이후에 나오는 이미지에만 loading="lazy"를 적용해야 합니다.
관련 인사이트
무료 진단
내 사이트의 이미지 SEO 상태, 지금 바로 점검해보세요
URL 하나로 이미지 최적화·Core Web Vitals·구조화 데이터를 30초 안에 확인할 수 있습니다.
무료 사이트 진단 시작 →