이미지 SEO 최적화 — 검색 노출과 페이지 속도를 동시에 잡는 7가지 체크포인트

사이트에 이미지를 한참 올리고 나서야 깨닫는 사실이 있습니다. 이미지가 SEO에서 가장 자주 방치되는 영역이라는 것이죠. 텍스트는 다들 신경 써서 쓰면서, 정작 페이지 용량의 절반 이상을 차지하는 이미지는 "잘 보이면 됐지" 하고 넘어가는 분이 많습니다. 솔직히 저희가 컨설팅 들어가서 가장 먼저 바꾸는 것도 이미지입니다. 손은 적게 가는데 효과는 크거든요.

이번 글은 막연한 이론이 아니라, 이미지 SEO 최적화에서 실무자가 실제로 손대는 순서대로 정리했습니다. 파일명과 alt 같은 기본기부터 시작해서 WebP/AVIF, lazy loading, 이미지 사이트맵까지 — 검색 노출과 속도를 동시에 잡는 7가지 체크포인트입니다.

이미지 SEO가 왜 검색 순위에 직접 영향을 주는가

"이미지 좀 안 챙긴다고 순위가 떨어지나요?" 이 질문을 정말 많이 받습니다. 결론부터 말하면 떨어집니다. 그것도 두 가지 경로로요. 첫째는 이미지 검색 트래픽입니다. Google 이미지 검색은 전체 검색의 상당 부분을 차지하는데, alt 텍스트와 파일명이 부실하면 여기서 바로 누락됩니다. 둘째는 Core Web Vitals입니다. 페이지 속도가 떨어지면 본문 키워드와 무관하게 전체 순위가 밀려요.

실제 측정 데이터를 보면 왜 이미지가 핵심인지 명확합니다. Core Web Vitals 분석에 따르면 데스크톱 페이지의 약 85%, 모바일의 76%에서 LCP(Largest Contentful Paint) 요소가 이미지로 측정됩니다. 즉, 사용자가 페이지를 열었을 때 가장 먼저 보이는 큰 영역이 십중팔구 이미지라는 뜻이죠. 이 한 장만 제대로 최적화해도 LCP 점수가 눈에 띄게 좋아집니다.

그러니까 이미지 SEO 최적화는 "검색 노출 추가 채널 + 속도 개선"을 한 번에 가져가는 작업입니다. 텍스트 콘텐츠를 새로 쓰는 것보다 ROI가 좋은 경우가 훨씬 많습니다.

파일명과 alt 텍스트 — 가장 빠른 ROI를 내는 두 가지

이미지 SEO에서 가장 먼저 손볼 곳은 두 가지입니다. 파일명과 alt 텍스트. 이 둘만 정리해도 이미지 검색 노출이 한 단계 올라갑니다. 저희 팀 내부 컨벤션도 결국 이 두 가지로 압축됩니다.

파일명 작성 규칙

Google 검색 센터의 이미지 가이드에서도 명시적으로 권장하는 부분입니다. 파일명은 그 자체로 이미지의 내용을 설명해야 합니다. 카메라가 자동으로 붙인 IMG_3829.jpg 같은 이름은 검색엔진에게 아무 정보도 주지 않습니다.

alt 텍스트 작성 공식

alt 텍스트는 두 가지 역할을 동시에 합니다. 시각장애인 스크린리더가 읽어주는 접근성 도구이자, 검색엔진이 이미지 내용을 이해하는 핵심 신호입니다. 그래서 "키워드를 어떻게 우겨넣을까"가 아니라 "이미지를 안 보고도 무슨 그림인지 알 수 있게" 쓰는 게 맞습니다.

저희가 쓰는 5초 공식이 있습니다. "누가 / 무엇을 / 어떻게" 세 요소를 한 문장에 담는 겁니다.

• 나쁜 alt: alt="이미지", alt="제품 사진", alt="seo seo seo"
• 평범한 alt: alt="검은색 가죽 지갑"
• 좋은 alt: alt="펼친 상태의 검은색 가죽 이중 지갑 — 카드 슬롯 6개 정면 컷"

장식용 이미지(배경, 구분선 등)는 어떻게 할까요. 이런 건 alt를 비워두는 게 정답입니다. alt=""로 두면 스크린리더가 건너뛰고, 검색엔진도 의미 없는 이미지로 분류합니다. 빈 alt도 의도된 alt입니다.

WebP/AVIF 포맷 전환 — 용량 50~70% 절감

이미지 SEO 최적화에서 다음으로 큰 레버는 포맷입니다. JPEG/PNG로 올린 이미지를 WebP나 AVIF로 바꾸기만 해도 같은 화질에서 용량이 절반 이하로 떨어집니다. 페이지 무게가 가벼워지면 LCP가 즉시 개선되고, 모바일 사용자 이탈률이 줄어듭니다.

언제 WebP, 언제 AVIF

실무 기준은 단순합니다. 일반 콘텐츠 이미지는 WebP를 기본으로 두고, 첫 화면 LCP에 해당하는 큰 히어로 이미지나 쇼핑몰의 메인 제품 컷처럼 용량 차이가 크게 체감되는 곳만 AVIF를 추가합니다. 모든 이미지를 AVIF로 바꿀 필요는 없어요. 인코딩 시간이 길고, 일부 구버전 브라우저에서 깨질 수 있습니다.

picture 태그로 폴백 처리

AVIF를 도입할 때는 폴백이 필수입니다. picture 태그를 쓰면 브라우저가 알아서 지원 가능한 포맷을 고릅니다.

<picture>
  <source srcset="/images/hero.avif" type="image/avif">
  <source srcset="/images/hero.webp" type="image/webp">
  <img src="/images/hero.jpg" alt="제품 메인 이미지" width="1200" height="630">
</picture>

lazy loading과 LCP — 헷갈리면 순위가 떨어집니다

여기서 실수가 가장 자주 나옵니다. "이미지에 lazy 걸면 빨라진다"는 말만 듣고 모든 이미지에 loading="lazy"를 박아놓는 케이스인데요. 2025 Web Almanac 기준 전체 페이지의 약 16%가 LCP 이미지에 lazy를 걸어 두는 실수를 하고 있습니다. 이건 LCP를 거의 확정적으로 망가뜨리는 패턴입니다.

LCP 이미지에 절대 lazy 걸지 마세요

LCP 이미지란 첫 화면에 가장 크게 보이는 요소입니다. 보통 블로그 히어로 이미지, 상세 페이지 메인 사진, 랜딩 페이지 첫 비주얼이 여기에 해당합니다. 여기에 lazy를 걸면 브라우저가 일부러 로딩을 늦추기 때문에 LCP 점수가 직격탄을 맞습니다.

• 첫 화면(above the fold) 이미지 → loading="eager" + fetchpriority="high"
• 스크롤 내려야 보이는 이미지 → loading="lazy"
• 장식 배경 이미지 → CSS 배경으로 두고 critical만 인라인 처리

fetchpriority와 width/height

모든 이미지 태그에는 width와 height를 명시하세요. 이 두 속성이 없으면 브라우저가 이미지 공간을 미리 잡지 못해 레이아웃이 흔들립니다(CLS 악화). 작업이 5초도 안 걸리는데 효과는 큽니다.

반응형 이미지 — srcset과 sizes로 모바일까지 챙기기

모바일 사용자에게 데스크톱용 1920px 원본을 그대로 보내면 어떻게 될까요. 데이터가 낭비되고 LCP가 무너집니다. 그래서 srcset과 sizes로 디바이스별 최적 사이즈를 제공하는 게 표준입니다.

<img
  src="/images/product-800.webp"
  srcset="/images/product-400.webp 400w,
          /images/product-800.webp 800w,
          /images/product-1200.webp 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1024px) 800px,
         1200px"
  alt="검은색 가죽 지갑 정면 컷"
  width="1200" height="800"
  loading="lazy" decoding="async"
>

반응형 이미지 도입이 어렵다면 최소한 모바일용 1배수 이미지(보통 800px 폭)를 별도로 두세요. 한 가지 사이즈만 모든 디바이스에 보내는 것이 가장 흔한 비효율입니다. 메타 단계의 점검은 온페이지 SEO 최적화 가이드에서 추가로 확인할 수 있습니다.

이미지 사이트맵과 구조화 데이터로 검색 노출 늘리기

여기까지 왔다면 사이트 안의 이미지는 잘 정리된 상태입니다. 이제 Google이 이 이미지들을 빠짐없이 발견하게 만들 차례입니다. 그게 이미지 사이트맵의 역할입니다.

일반 sitemap.xml에 이미지 정보를 함께 넣을 수 있습니다.

<url>
  <loc>https://example.com/products/wallet</loc>
  <image:image>
    <image:loc>https://example.com/images/wallet-front.webp</image:loc>
    <image:title>검은색 가죽 이중 지갑 정면</image:title>
  </image:image>
</url>

쇼핑몰처럼 이미지가 수천 장 단위라면 별도 파일로 image-sitemap.xml을 두는 것을 권장합니다. 작성과 제출 흐름은 sitemap.xml 만드는 법에 정리되어 있습니다. 이미 사이트맵이 있다면 사이트맵 생성기로 이미지 항목까지 한 번에 만들 수 있고요.

덧붙여, 제품/레시피/기사처럼 schema.org 구조화 데이터를 쓰는 페이지에서는 image 속성을 빠뜨리지 마세요. 이건 Google이 리치 결과(rich result)에 이미지를 띄울지 결정할 때 직접 참조하는 신호입니다. OG 이미지(og:image) 메타도 함께 점검하면 좋고, 자세한 메타 설정은 메타태그 설정하는 방법에서 다룹니다.

실수 줄이는 7가지 체크리스트와 다음 단계

여기까지 정리한 내용을 실제 작업 순서로 묶으면 다음 7개입니다. 새 글을 발행할 때마다 이 체크리스트를 한 번씩 돌리는 것만으로도 사이트 전반의 이미지 SEO 수준이 올라갑니다.

• 파일명을 영문 소문자 + 하이픈 + 핵심 키워드 형태로 정리했나요?
• 모든 의미 있는 이미지에 한 문장짜리 구체적 alt 텍스트가 있나요? (장식용은 빈 alt)
• JPEG/PNG 대신 WebP를 기본으로, 큰 히어로에는 AVIF를 적용했나요?
• 모든 img 태그에 width와 height가 명시되어 있나요? (CLS 방지)
• LCP 이미지에는 lazy를 걸지 않고, 본문 아래 이미지에만 lazy를 걸었나요?
• 모바일/태블릿/데스크톱용 srcset이 설정되어 있나요?
• sitemap.xml에 image:image 항목이 포함되어 있고, schema.org image도 채웠나요?