이미지 SEO
이미지 SEO는 웹페이지의 이미지를 검색엔진이 이해하고 구글 이미지 검색 등에 노출되도록 최적화하는 작업입니다. alt 텍스트, 파일명, 압축, 반응형 이미지, 구조화 데이터, 이미지 사이트맵 등을 통해 이미지의 검색 가시성과 페이지 로딩 속도를 함께 개선합니다.
- 이미지 SEO는 검색엔진이 이미지를 이해하고 이미지 검색에 노출시키도록 alt 텍스트·파일명·압축·반응형·구조화 데이터를 최적화하는 작업입니다.
- 구글은 CSS 배경 이미지를 색인하지 않으므로 반드시 img 태그에 src와 서술적인 alt 속성을 사용해야 합니다.
- alt 텍스트와 파일명은 짧고 서술적으로 작성하되, 키워드를 남발하면 스팸으로 간주될 수 있습니다.
- 이미지는 보통 페이지 용량의 가장 큰 비중을 차지하므로, 압축과 WebP·AVIF 같은 현대 포맷 사용이 로딩 속도와 SEO에 직결됩니다.
- srcset 반응형 이미지, 지연 로딩, 이미지 사이트맵, 구조화 데이터로 발견 가능성과 리치 결과 노출을 높일 수 있습니다.
개요
이미지 SEO란 웹페이지에 포함된 이미지를 검색엔진이 정확히 이해하고, 구글 이미지 검색 같은 결과 화면에 노출되도록 최적화하는 작업입니다. 검색엔진은 사람처럼 사진을 직접 보지 못하기 때문에, alt 텍스트·파일명·주변 텍스트·구조화 데이터 같은 신호에 의존하여 이미지의 주제를 파악합니다. 따라서 이미지 SEO의 핵심은 이러한 신호를 명확하게 제공하는 동시에, 이미지 파일 자체를 가볍게 만들어 페이지 로딩 속도를 떨어뜨리지 않는 것입니다.
구글 검색 센터 문서에 따르면 구글은 BMP, GIF, JPEG, PNG, WebP, SVG, AVIF 형식을 지원하며, CSS 배경 이미지는 색인하지 않습니다. 즉 검색에 노출하고 싶은 이미지는 반드시 HTML img 요소로 삽입해야 합니다. 이미지 SEO는 검색 가시성뿐 아니라 접근성(스크린 리더 사용자)과 코어 웹 바이탈 같은 성능 지표에도 동시에 기여한다는 점에서 중요합니다.
주요 최적화 항목
| 항목 | 최적화 방법 | 효과 |
|---|---|---|
| alt 텍스트 | 이미지 내용을 구체적이고 간결하게 서술, 키워드 남발 금지 | 이미지 검색 노출, 접근성 향상 |
| 파일명 | generic한 IMG00023.jpg 대신 서술적인 이름 사용 | 주제에 대한 약한 단서 제공 |
| 파일 포맷 | 사진은 JPEG·WebP·AVIF, 로고·아이콘은 PNG·SVG, 애니메이션은 GIF | 품질 대비 용량 최적화 |
| 압축·리사이즈 | 표시 크기에 맞춰 리사이즈 후 압축 | 페이지 로딩 속도 개선 |
| 반응형 이미지 | srcset 또는 picture 요소로 기기별 크기 제공 | 불필요한 대역폭 절감 |
| 지연 로딩 | 화면 아래 이미지를 필요 시점에 로딩 | 초기 렌더링 속도 향상 |
| 이미지 사이트맵 | image:loc 요소로 이미지 URL 명시 | 발견·색인 가능성 향상 |
| 구조화 데이터 | 제품·레시피·동영상 스키마 마크업 | 이미지 검색 배지 등 리치 결과 |
코드 예시
가장 기본이 되는 서술적 alt 속성과 캡션 예시입니다. 구글은 alt 텍스트와 캡션 양쪽에서 정보를 추출하므로 둘 다 활용하면 좋습니다.
<figure>
<img src="/images/dalmatian-puppy-playing-fetch.webp"
alt="공놀이를 하는 달마시안 강아지">
<figcaption>마당에서 공을 물어오는 달마시안 강아지</figcaption>
</figure>다음은 기기 해상도에 따라 다른 크기의 이미지를 제공하는 반응형 srcset 마크업입니다. 불필요하게 큰 파일을 받지 않게 하여 대역폭과 로딩 시간을 줄입니다.
<img src="/images/cheesecake-720.jpg"
srcset="/images/cheesecake-480.jpg 480w,
/images/cheesecake-720.jpg 720w,
/images/cheesecake-1080.jpg 1080w"
sizes="(max-width: 600px) 480px, 720px"
alt="초콜릿 치즈케이크 한 조각"
loading="lazy">여러 포맷을 동시에 제공하여 브라우저가 지원하는 최신 포맷(AVIF, WebP)을 우선 사용하게 하려면 picture 요소를 사용합니다.
<picture>
<source srcset="/images/photo.avif" type="image/avif">
<source srcset="/images/photo.webp" type="image/webp">
<img src="/images/photo.jpg" alt="노을이 지는 해변 풍경">
</picture>근거
구글 검색 센터의 이미지 SEO 문서는 파일명과 alt 텍스트를 서술적이되 간결하게 작성하고, alt 속성에 키워드를 채워 넣는 키워드 스터핑은 스팸으로 간주될 수 있다고 명시합니다. 또한 구글은 CSS 이미지를 색인하지 않으므로 img 요소 사용을 권장하며, schema.org의 primaryImageOfPage 속성이나 og:image로 결과에 표시될 대표 이미지를 지정할 수 있다고 안내합니다.
Ahrefs의 이미지 SEO 가이드는 이미지가 페이지 용량의 가장 큰 비중을 차지하는 경우가 많아 압축이 로딩 속도에 직접적인 영향을 준다고 설명합니다. 실제 테스트에서 ImageOptim은 JPEG 파일을 69%, PNG 파일을 40% 줄였으며, 한 SVG 파일은 최소화·gzip 압축으로 8.54kb에서 3.56kb로 감소했습니다. Ahrefs 블로그는 본문 이미지 최대 폭을 720px로 리사이즈하여 과도하게 큰 파일 로딩을 방지하는 사례를 제시합니다. 또한 alt 텍스트를 "This is a(n) [유형] of ___" 형식으로 채워 쓰면 간결하고 정확한 서술이 된다고 권장합니다.
실행 체크리스트
- 모든 의미 있는 이미지에 구체적이고 간결한 alt 텍스트를 작성합니다. 장식용 이미지는 빈 alt 속성(alt="")을 부여합니다.
- 파일명을 IMG00023.jpg 대신 dalmatian-puppy-playing-fetch.jpg처럼 서술적으로 짓습니다.
- 사진은 WebP·AVIF, 로고·아이콘은 SVG·PNG 등 용도에 맞는 포맷을 선택합니다.
- 이미지를 실제 표시 크기에 맞춰 리사이즈한 뒤 압축하여 용량을 줄입니다.
- srcset 또는 picture 요소로 기기별 반응형 이미지를 제공합니다.
- 화면 아래 이미지에 loading="lazy"로 지연 로딩을 적용합니다.
- 이미지를 관련 본문 텍스트 가까이에 배치하고 캡션을 함께 제공합니다.
- 제품·레시피·동영상 등 해당되는 콘텐츠에 구조화 데이터를 추가하여 리치 결과를 노립니다.
- 이미지 사이트맵을 제출하여 검색엔진의 발견·색인 가능성을 높입니다.
- CSS 배경 이미지 대신 HTML img 요소로 색인 대상 이미지를 삽입합니다.