alt는 모든 이미지에 넣어야 하나요?

의미 있는 이미지에는 내용을 설명하는 alt를 넣고, 장식용 이미지는 alt 값을 빈 문자열로 둡니다. alt 속성 자체를 빼면 스크린리더가 파일 이름을 읽는 등 접근성이 나빠집니다.

alt에 키워드를 여러 개 넣으면 효과가 있나요?

아닙니다. 구글은 alt에 키워드를 나열하면 스팸으로 보일 수 있다고 경고합니다. 이미지를 한 문장으로 설명하다가 키워드가 자연스럽게 들어가는 정도가 적당합니다.

WebP와 AVIF 중 무엇을 써야 하나요?

둘 다 주요 브라우저와 구글 검색에서 지원됩니다. 압축률은 대체로 AVIF가 앞서므로 picture 요소로 AVIF와 WebP를 함께 제공하고 JPG를 대체 이미지로 두는 방식이 가장 안전합니다.

모든 이미지에 지연 로딩을 적용해도 되나요?

첫 화면에 보이는 이미지, 특히 LCP가 되는 대표 이미지에는 적용하지 마세요. 표시가 늦어져 LCP가 나빠집니다. 스크롤해야 보이는 이미지에만 적용합니다.

이미지 파일명을 한글로 지어도 되나요?

구글은 현지 언어 파일명도 인정하지만, 한글은 주소에서 %EC%9D%B4 같은 형태로 인코딩되어 길어지고 일부 도구에서 깨지기도 합니다. 영문 소문자와 하이픈 조합이 실무적으로 가장 안전합니다.

이미지 SEO 가이드 — alt 작성법부터 WebP·AVIF, LCP 이미지 최적화까지

이미지 SEO는 두 가지로 요약됩니다. 검색엔진이 이미지를 이해하게 하는 것(alt, 파일명, 주변 텍스트)과 이미지가 페이지를 느리게 만들지 않게 하는 것(WebP·AVIF, 적정 크기, srcset, width·height, 지연 로딩)입니다. 특히 첫 화면의 대표 이미지는 LCP(최대 콘텐츠 표시 시간)를 좌우하므로, 지연 로딩 대신 fetchpriority="high"로 가장 먼저 불러와야 합니다.

이미지 SEO는 왜 필요한가요?

추가 유입 경로: 구글 이미지 검색, 구글 렌즈, 검색 결과의 썸네일을 통해 방문자가 들어옵니다. 상품, 인테리어, 음식처럼 눈으로 고르는 업종일수록 효과가 큽니다.
속도와 Core Web Vitals: 이미지는 대부분의 페이지에서 용량을 가장 많이 차지합니다. 무거운 이미지는 LCP를, 크기를 지정하지 않은 이미지는 CLS(레이아웃 이동)를 나쁘게 만듭니다.
접근성과 AI: alt는 화면을 볼 수 없는 사용자와, 이미지를 직접 보지 못하는 크롤러를 위한 설명입니다.

한국 사이트에서 특히 흔한 문제는 통이미지 상세페이지입니다. 가격, 영업시간, 상품 설명을 이미지 안에만 넣으면 검색엔진과 AI가 그 내용을 안정적으로 읽지 못합니다. 핵심 정보는 반드시 HTML 텍스트로도 적으세요. 또 구글은 CSS 배경 이미지를 색인하지 않으므로, 검색에 노출하고 싶은 이미지는 <img> 태그로 넣어야 합니다.

alt(대체 텍스트)는 어떻게 쓰나요?

이미지를 볼 수 없는 사람에게 전화로 설명한다고 생각하고 한 문장으로 씁니다. 「이미지」, 「사진」 같은 말은 붙이지 않아도 됩니다.

상황	아쉬운 alt	좋은 alt
상품 사진	상품이미지1	네이비 울 더블 코트 정면 착용 모습
매장 사진	강남치과 강남임플란트 치과추천	바른치과 1층 대기실과 접수 데스크
로고 링크	logo	바른치과 홈
글자가 든 배너	배너	9월 한정 첫 방문 스케일링 할인 안내
장식용 구분선	구분선	(빈 값)

<!-- 의미 있는 이미지: 내용을 설명 -->
<img src="/images/navy-wool-coat-front.webp" alt="네이비 울 더블 코트 정면 착용 모습" width="800" height="1000">

<!-- 장식용 이미지: alt를 비워 스크린리더가 건너뛰게 -->
<img src="/images/divider.svg" alt="" width="600" height="8">

키워드는 설명에 자연스럽게 들어갈 때만 씁니다. 구글도 alt에 키워드를 늘어놓으면 스팸처럼 보일 수 있다고 경고합니다.
링크로 쓰인 이미지(로고, 버튼)는 이미지 모양이 아니라 이동할 곳을 적습니다.
글자가 들어간 배너는 그 글자를 alt에 옮겨 적습니다.
이미지 바로 옆의 캡션과 본문도 검색엔진이 이미지를 이해하는 단서입니다. 관련 설명 가까이에 이미지를 두세요.

파일명과 이미지 주소는 어떻게 정하나요?

구글은 IMG00023.JPG보다 내용을 설명하는 파일명을 권장합니다. 현지 언어로 된 파일명도 인정하지만, 한글 파일명은 주소에서 퍼센트 인코딩되어 길어지고 일부 CMS·CDN·메신저에서 깨지기도 합니다. 실무에서는 영문 소문자와 하이픈 조합이 가장 안전합니다.

좋은 예: gangnam-dental-lobby.webp, strawberry-lettering-cake.avif
피할 예: KakaoTalk_20260928_123456.jpg, 최종 수정본 (2).png
빌드 도구가 붙이는 해시(-a1b2c3)는 괜찮지만, 앞부분은 내용을 설명하게 짓습니다.
robots.txt에서 이미지 폴더를 막으면 이미지 검색에 나오지 않습니다. 설정은 robots.txt 가이드를 참고하세요.

WebP·AVIF로 용량 줄이기

형식	적합한 용도	특징
JPG	사진	호환성 최고, 용량은 중간
PNG	투명 배경, 선명한 그래픽	사진에 쓰면 용량이 매우 큼
WebP	사진·그래픽 모두	구글 자료 기준 같은 화질에서 JPG보다 25~34% 작음
AVIF	사진	대체로 WebP보다 더 작지만 변환 시간이 김
SVG	로고, 아이콘	벡터라 어떤 크기에서도 선명

2026년 현재 WebP와 AVIF는 크롬, 엣지, 파이어폭스, 사파리 등 주요 브라우저에서 모두 지원되고, 구글 검색도 두 형식을 모두 색인합니다. 그래도 오래된 기기를 고려한다면 <picture>로 대체 이미지를 함께 두는 것이 안전합니다.

<picture>
  <source type="image/avif" srcset="/images/cake-800.avif">
  <source type="image/webp" srcset="/images/cake-800.webp">
  <img src="/images/cake-800.jpg" alt="딸기 생크림 레터링 케이크" width="800" height="600">
</picture>

형식보다 먼저 확인할 것은 실제 표시 크기입니다. 화면에 800px로 보이는 자리에 휴대폰 카메라 원본(4000px 이상)을 올리면 형식을 바꿔도 여전히 무겁습니다. 표시 크기의 1~~2배로 줄인 뒤 변환하세요. 대부분의 사진은 품질 75~~85 정도로 압축해도 눈으로 차이를 느끼기 어렵습니다. 단, 카카오톡 공유용 대표 이미지는 JPG나 PNG로 두는 것이 좋습니다. 이유는 Open Graph 가이드에 정리했습니다.

srcset과 width·height로 크기 맞추기

srcset은 같은 이미지를 여러 크기로 준비해 두고 브라우저가 화면 폭에 맞는 파일을 고르게 하는 속성입니다. 휴대폰에서는 작은 파일을 받으니 모바일 속도가 빨라집니다.

<img
  src="/images/lobby-800.webp"
  srcset="/images/lobby-480.webp 480w, /images/lobby-800.webp 800w, /images/lobby-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="바른치과 1층 대기실과 접수 데스크"
  width="800" height="533"
  loading="lazy">

width와 height는 원본 비율대로 적습니다. 브라우저가 이미지를 받기 전에 비율만큼 자리를 비워 두기 때문에, 이미지가 늦게 떠도 글이 밀려 내려가지 않습니다(CLS 0.1 이하가 좋음). 반응형 레이아웃이라면 CSS에서 max-width: 100%; height: auto;를 함께 지정하면 크기는 화면에 맞게 줄고 비율은 유지됩니다.

지연 로딩과 LCP 이미지는 어떻게 다뤄야 하나요?

loading="lazy"는 화면에 가까워질 때까지 이미지 다운로드를 미루는 브라우저 기본 기능으로, 구글도 이 방식을 문제없이 처리합니다. 스크롤 이벤트에만 의존하는 오래된 자바스크립트 지연 로딩은 크롤러가 이미지를 발견하지 못할 수 있으니 기본 기능으로 바꾸는 것이 안전합니다.

반대로 LCP 이미지, 즉 첫 화면에서 가장 크게 보이는 대표 이미지는 최대한 빨리 불러와야 합니다. LCP는 2.5초 이하가 좋음 기준입니다.

<!-- 첫 화면 대표 이미지(LCP): 지연 로딩 금지, 우선순위 높임 -->
<img src="/images/hero-1200.webp" alt="성수동 달빛베이커리 매장 전경"
     width="1200" height="675" fetchpriority="high">

<!-- CSS 배경 이미지가 LCP라면 head에서 미리 불러오기 -->
<link rel="preload" as="image" href="/images/hero-1200.webp" fetchpriority="high">

<!-- 스크롤해야 보이는 이미지 -->
<img src="/images/menu-01.webp" alt="딸기 생크림 케이크 한 조각" width="600" height="400" loading="lazy">

대표 이미지에는 loading="lazy"를 넣지 않습니다.
fetchpriority="high"는 페이지당 한두 개, 진짜 대표 이미지에만 씁니다. 여러 개에 붙이면 서로 경쟁해 효과가 줄어듭니다.
대표 이미지는 HTML에 <img>로 바로 넣습니다. 자바스크립트 슬라이더가 나중에 끼워 넣으면 그만큼 늦게 뜹니다. 슬라이더라면 첫 장만 우선 처리합니다.
대표 이미지도 표시 크기에 맞게 줄이고 WebP·AVIF로 변환합니다.

속도 전반은 페이지 속도 가이드와 전자책 PART 5 기술적 SEO에서 더 자세히 다룹니다.

SEO Check에서는 이렇게 점검합니다

무료 SEO 진단은 홈페이지 HTML의 이미지를 모두 읽어 다음을 확인합니다.

이미지 alt: alt 속성이 없는 이미지를 셉니다. 모두 있으면 통과, 누락이 20% 이하면 개선 필요, 그보다 많으면 문제로 표시하고 누락된 이미지 주소를 보여줍니다. 빈 alt는 장식용 표시로 인정합니다.
width·height 지정: 크기가 지정되지 않은 이미지가 30%를 넘으면 레이아웃 이동(CLS) 위험으로 경고합니다.
지연 로딩: 이미지가 6개 이상인데 loading="lazy"가 하나도 없으면 경고합니다.

정밀진단 리포트는 여기에 더해 다음을 측정합니다.

차세대 이미지 형식: 이미지 중 WebP·AVIF 비율이 절반 미만이면 개선 필요로 표시합니다.
Lighthouse 모바일 측정: LCP 2.5초 이하, CLS 0.1 이하, 페이지 전체 용량 2MB 이하를 기준으로 보고, 이미지 크기·형식 관련 개선 기회를 알려줍니다.
의미 있는 이미지에는 설명형 alt, 장식용 이미지에는 빈 alt가 있다
파일명은 내용을 설명하는 영문 소문자와 하이픈 조합이다
사진은 표시 크기에 맞게 줄여 WebP 또는 AVIF로 제공한다
모든 이미지에 width와 height가 있다
첫 화면 대표 이미지는 지연 로딩 없이 fetchpriority="high"를 지정했다
스크롤해야 보이는 이미지에는 loading="lazy"를 지정했다
가격·영업시간 같은 핵심 정보가 이미지 안에만 있지 않다