이미지 SEO 최적화 분석

이미지 최적화 분석

점검 항목

대체 텍스트

• 모든 <img> 요소에 존재해야 함 (장식용 이미지 제외: role="presentation"). parse_html.py는 이를 decorative: true로 표시하며, 누락 플래그를 생성하지 않습니다.
• 설명적이어야 함: 이미지 내용을 설명, "image.jpg"나 "photo" 같은 단순 파일명이 아님
• 자연스럽게 관련 키워드를 포함, 키워드 스터핑 금지
• 길이: 10-125자

좋은 예:

• "Professional plumber repairing kitchen sink faucet"
• "Red 2024 Toyota Camry sedan front view"
• "Team meeting in modern office conference room"

나쁜 예:

• "image.jpg" (파일명, 설명 아님)
• "plumber plumbing plumber services" (키워드 스터핑)
• "Click here" (설명적이지 않음)

파일 크기

이미지 유형별 단계별 임계값:

이미지 유형	목표	경고	심각
썸네일	< 50KB	> 100KB	> 200KB
콘텐츠 이미지	< 100KB	> 200KB	> 500KB
히어로/배너 이미지	< 200KB	> 300KB	> 700KB

품질 손실 없이 가능한 경우 목표 임계값까지 압축을 권장합니다.

형식

형식	브라우저 지원	사용 사례
WebP	97%+	기본 권장
AVIF	92%+	최고 압축률, 최신
JPEG	100%	사진을 위한 대체 형식
PNG	100%	투명도가 필요한 그래픽
SVG	100%	아이콘, 로고, 일러스트레이션

JPEG/PNG보다 WebP/AVIF를 권장합니다. <picture> 요소와 형식 대체가 있는지 확인하세요.

제공된 형식을 판단하고, URL 확장자는 무시하세요

많은 사이트(WordPress WebP 플러그인(EWWW, ShortPixel, WebP Express, Imagify), Cloudflare Polish, 이미지 CDN 등)는 브라우저가 요청할 때 .jpg/.png URL에서 WebP 또는 AVIF를 제공합니다. 확장자는 방문자가 실제로 받는 형식이 아닙니다. 다음 명령을 실행하세요: "${CLAUDE_PLUGIN_ROOT}/scripts/claude-seo" run parse_html.py --url <url> --probe-images --json 이 명령은 브라우저 Accept 헤더와 함께 각 이미지를 가져와 모든 이미지 항목에 추가합니다(지연 로딩 이미지의 경우 실제 소스인 resolved_src를 조사합니다. src는 자리 표시자이기 때문입니다):

필드	의미
served_format	실제로 제공된 형식(webp, avif, jpeg, png, gif, svg, jxl), 매직 바이트에서 가져옴, 없으면 null
served_bytes	실제로 제공된 크기(Content-Length), 서버가 생략하면 null
negotiated	응답에 Vary: Accept가 있으면 true, 따라서 형식이 브라우저에 따라 달라짐
probe_error	이미지를 확인할 수 없는 이유(가져오기 실패, 잘못된 URL, 또는 HTML 오류나 핫링크 보호 페이지와 같이 인식된 이미지가 아닌 응답), 그렇지 않으면 null

• "잘못된 형식" 플래그와 크기 절감은 served_format / served_bytes에서만 계산하세요. served_format: webp인 .jpg URL은 이미 최적화된 것입니다. 변환을 권장하지 마세요.
• probe_error가 설정된 경우 형식을 확인되지 않은 것으로 보고하세요. 확장자에서 유추하지 마세요.
• HTTP 200을 반환하는지 확인하지 않고 대체 이미지 URL(예: photo.webp)을 제안하지 마세요.

권장 <picture> 요소 패턴

가장 효율적인 형식을 먼저 사용하여 점진적 향상을 사용하세요:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="설명적인 대체 텍스트" width="800" height="600" loading="lazy" decoding="async">
</picture>

브라우저는 지원되는 첫 번째 형식을 사용합니다. 전역 브라우저 지원(caniuse.com, 2026-09-28 확인): AVIF 약 95.4%, WebP 약 96.8%. 인용하기 전에 caniuse를 다시 확인하세요.

JPEG XL: 새로운 형식

타사 보고서와 Wikipedia에 따르면 Rust 기반 JPEG XL 디코더가 Chrome 145 안정 버전(2026-02-10)에 chrome://flags/#enable-jxl-image-format 플래그 뒤에 제공되었지만 기본적으로 활성화되지는 않았습니다. Google 소유의 확인은 팩트 팩에서 검색되지 않았습니다. 기본 지원이 확인되지 않았기 때문에 프로덕션 웹 전달에는 아직 실용적이지 않습니다. JPEG 대체와 함께 AVIF/WebP를 계속 제공하고 모니터링하세요.

반응형 이미지

• 여러 크기에 대한 srcset 속성
• 레이아웃 중단점과 일치하는 sizes 속성
• 기기 픽셀 비율에 적합한 해상도

<img
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  alt="설명"
>

지연 로딩

• 화면 아래 이미지에는 loading="lazy" 사용
• 화면 위/히어로 이미지는 지연 로딩하지 마세요(LCP에 해로움)
• 네이티브 vs JavaScript 기반 지연 로딩 확인

<!-- 화면 아래 - 지연 로딩 -->
<img src="photo.jpg" loading="lazy" alt="설명">

<!-- 화면 위 - 즉시 로딩(기본값) -->
<img src="hero.jpg" alt="히어로 이미지">

감지된 지연 로더 방법(lazy_method 필드)

"${CLAUDE_PLUGIN_ROOT}/scripts/claude-seo" run parse_html.py는 각 이미지 항목의 lazy_method 필드를 통해 각 이미지의 지연 로딩 메커니즘을 분류합니다. 다섯 가지 값:

lazy_method	감지된 신호	일반적인 스택
native	loading="lazy" HTML 속성	최신 브라우저, 일반 HTML
perfmatters	data-perfmatters-src/-srcset 또는 클래스 perfmatters-lazy	WordPress + Perfmatters 플러그인
ewww	data-ewww-src / data-eio 또는 클래스 lazyload-eio	WordPress + EWWW Image Optimizer
js-generic	data-src / data-lazy-src / data-original / data-srcset 또는 클래스 lazyload/lazyloaded/lazy	Lazysizes, vanilla-lazyload, jQuery 플러그인
none	속성 및 클래스 신호 없음	페이지가 이 이미지를 지연 로딩하지 않음

이미지 SEO를 감사할 때 loading과 함께 lazy_method를 보고하여 사용자가 사이트가 JS 기반 지연 로더를 사용하는지(이 경우 네이티브 loading="lazy" 속성이 의도적으로 없으며 이는 회귀가 아님) 알 수 있도록 하세요.

LCP 이미지에 fetchpriority="high"

히어로/LCP 이미지에 fetchpriority="high"를 추가하여 브라우저의 네트워크 큐에서 다운로드 우선순위를 높이세요:

<img src="hero.webp" fetchpriority="high" alt="히어로 이미지 설명" width="1200" height="630">

중요: 화면 위/LCP 이미지를 지연 로딩하지 마세요. LCP 이미지에 loading="lazy"를 사용하면 LCP 점수에 직접적인 해를 끼칩니다. loading="lazy"는 화면 아래 이미지에만 예약하세요.

LCP가 아닌 이미지에 decoding="async"

LCP가 아닌 이미지에 decoding="async"를 추가하여 이미지 디코딩이 메인 스레드를 차단하는 것을 방지하세요:

<img src="photo.webp" alt="설명" width="600" height="400" loading="lazy" decoding="async">

CLS 방지

• 모든 <img> 요소에 width 및 height 속성 설정
• 대안으로 CSS aspect-ratio 사용
• 차원이 없는 이미지 플래그 지정

<!-- 좋음 - 차원 설정 -->
<img src="photo.jpg" width="800" height="600" alt="설명">

<!-- 좋음 - CSS aspect-ratio -->
<img src="photo.jpg" style="aspect-ratio: 4/3" alt="설명">

<!-- 나쁨 - 차원 없음 -->
<img src="photo.jpg" alt="설명">

파일 이름

• 설명적: IMG_1234.jpg 대신 blue-running-shoes.webp
• 하이픈으로 연결, 소문자, 특수 문자 없음
• 관련 키워드 포함

CDN 사용

• 이미지가 CDN에서 제공되는지 확인(다른 도메인, CDN 헤더)
• 이미지가 많은 사이트에 CDN 권장
• 엣지 캐싱 헤더 확인

출력

이미지 감사 요약

메트릭	상태	개수
총 이미지	-	XX
대체 텍스트 누락	❌	XX
크기 초과(>200KB)	⚠️	XX
잘못된 형식	⚠️	XX
차원 없음	⚠️	XX
지연 로딩 안 됨	⚠️	XX

우선 순위 최적화 목록

파일 크기 영향별 정렬(가장 큰 절감 순):

이미지	현재 크기	형식	문제	예상 절감
...	...	...	...	...

권장 사항

1. X개 이미지를 WebP 형식으로 변환(약 XX KB 절감)
2. X개 이미지에 대체 텍스트 추가
3. X개 이미지에 차원 추가
4. X개 화면 아래 이미지에 지연 로딩 활성화
5. X개 크기 초과 이미지 압축

---

이미지 SERP 분석

DataForSEO MCP를 사용할 수 있는 경우 경쟁 데이터로 이미지 감사를 강화합니다.

/seo images serp <keyword>

페이지 내 이미지를 구글 SERP에 표시된 이미지 결과와 상호 참조합니다.

워크플로우:

1. 고정된 DataForSEO MCP 서버(2.8.10)에는 Google 이미지 SERP 도구가 없습니다. serp_organic_live_advanced(depth=100)의 images 요소를 사용하고 SERP에 이미지 요소가 있을 때만 사용하며, 이미지 SERP 데이터를 사용할 수 없을 때는 명확히 말하세요.
2. 추출: 상위 도메인, 이미지 유형, 대체 텍스트 패턴
3. 경쟁사 이미지 SERP 환경 출력

출력:

순위	도메인	제목/대체 텍스트	이미지 URL	페이지 URL
1	example.com	"Blue running shoes..."	.../shoes.webp	/products/...

분석 내용:

• 도메인 지배력: 가장 많은 이미지 위치를 차지하는 사이트(개수 상위 10개)
• 대체 텍스트 패턴: 상위 순위 이미지의 일반적인 제목/대체 텍스트 패턴
• 형식 분포: 상위 결과에서 WebP 대 JPEG 대 PNG
• 기회 점수: 페이지 순위는 있지만 이미지 존재감이 없는 키워드

DataForSEO MCP를 사용할 수 없는 경우 사용자에게 알리고 확장 프로그램 설치를 제안하세요.

---

이미지 파일 최적화

SEO를 위해 이미지 파일 최적화: 형식 변환, 메타데이터 주입, 압축.

/seo images optimize <path>

웹 및 SEO를 위해 이미지 파일을 최적화합니다. WebP/AVIF로 변환하고, IPTC 메타데이터를 주입하며, 압축하고, 반응형 변형을 생성합니다.

사용되는 도구(선호도 순):

• exiftool -- EXIF/IPTC/XMP 읽기/쓰기(설치: sudo apt install libimage-exiftool-perl)
• cwebp -- WebP 변환(설치: sudo apt install webp)
• ImageMagick convert -- 형식 변환, 크기 조정(대부분의 시스템에 사전 설치됨)
• FFmpeg -- 형식 변환 대체(사전 설치됨)

실행 전: which exiftool cwebp convert ffmpeg로 사용 가능한 도구를 확인하세요.

형식 변환

메타데이터를 보존하면서 이미지를 최신 형식으로 변환:

# WebP(권장 기본값) - 메타데이터 보존
cwebp -q 82 -metadata all input.jpg -o output.webp

# ImageMagick을 통한 WebP(cwebp가 설치되지 않은 경우 대체)
convert input.jpg -quality 82 output.webp

# FFmpeg을 통한 AVIF(느린 인코딩, 최고 압축)
ffmpeg -i input.jpg -c:v libaom-av1 -crf 30 -still-picture 1 output.avif

# 반응형 변형(400w, 800w, 1200w)
convert input.jpg -resize 400x -quality 82 image-400.webp
convert input.jpg -resize 800x -quality 82 image-800.webp
convert input.jpg -resize 1200x -quality 82 image-1200.webp

메타데이터 주입(Google 이미지 표시용 IPTC)

Google 이미지는 검색 결과에 IPTC 크리에이터, 크레딧 라인, 저작권을 표시합니다. 이는 순위 요소가 아니지만 Google 이미지 표시와 브랜드 속성을 개선할 수 있습니다.

exiftool 사용(선호):

# 모든 메타데이터 읽기
exiftool image.jpg

# Google 이미지 리치 결과를 위한 IPTC + XMP 메타데이터 주입
exiftool \
  -IPTC:ObjectName="제품 사진 설명" \
  -IPTC:Caption-Abstract="상세 이미지 설명" \
  -IPTC:By-line="브랜드 명 사진" \
  -IPTC:Credit="브랜드 명" \
  -IPTC:CopyrightNotice="저작권 2026 브랜드 명" \
  -IPTC:Source="brandname.com" \
  -XMP:Title="제품 사진 설명" \
  -XMP:Description="상세 이미지 설명" \
  -XMP:Creator="브랜드 명 사진" \
  -XMP:Rights="저작권 2026 브랜드 명" \
  image.jpg

# 디렉토리의 모든 이미지에 일괄 주입
exiftool -overwrite_original \
  -IPTC:By-line="브랜드 명" \
  -IPTC:CopyrightNotice="저작권 2026 브랜드 명" \
  *.jpg *.webp *.png

ImageMagick 사용(대체):

identify -verbose image.jpg | head -50

convert input.jpg \
  -set comment "제품 사진 설명" \
  -set IPTC:2:80 "브랜드 명 사진" \
  -set IPTC:2:116 "저작권 2026 브랜드 명" \
  output.jpg

참고: WebP는 EXIF와 XMP를 지원하지만 IPTC는 기본적으로 지원하지 않습니다. WebP 파일의 경우 IPTC 대신 XMP 필드를 사용하세요. exiftool이 이 변환을 자동으로 처리합니다.

AI 생성 이미지: DigitalSourceType(Merchant Center 요구 사항)

생성형 AI로 생성된 제품 이미지의 경우 Google Merchant Center는 IPTC DigitalSourceType: TrainedAlgorithmicMedia 메타데이터를 요구합니다. 이는 순위 요소가 아닌 운영 정책 요구 사항입니다. AI 생성 이미지에 이 레이블이 없는 피드는 거부될 수 있습니다.

기본 출처(Merchant Center AI 생성 콘텐츠 정책): https://support.google.com/merchants/answer/14743464 (ai-optimization-guide는 DigitalSourceType/IPTC/Merchant 레이블을 문서화하지 않습니다.)

감사 명령:

# IPTC 레이블에 대한 디렉토리 감사(개수: 누락, AI, 캡처 등)
"${CLAUDE_PLUGIN_ROOT}/scripts/claude-seo" run iptc_ai_label.py audit ./images/ --json

# 단일 이미지 감사
"${CLAUDE_PLUGIN_ROOT}/scripts/claude-seo" run iptc_ai_label.py audit ./hero.webp --json

# AI 레이블을 이미지에 주입
"${CLAUDE_PLUGIN_ROOT}/scripts/claude-seo" run iptc_ai_label.py inject ./ai-hero.webp \
    --source-type trainedAlgorithmicMedia

# 기타 어휘 값:
#   compositeSynthetic               (캡처 + AI 요소 혼합)
#   algorithmicMedia                 (알고리즘에 의해 순수하게 생성, 샘플링된 학습 데이터 아님)
#   compositeWithTrainedAlgorithmicMedia (예: 실제 미디어 위의 AI 인페인팅/아웃페인팅)
#   digitalCapture                   (완전히 캡처된 사진)

원시 exiftool 동등 명령(임시 사용):

# 수동 주입
exiftool \
  -XMP-iptcExt:DigitalSourceType="https://cv.iptc.org/newscodes/digitalsourcetype/trainedAlgorithmicMedia" \
  ai-generated-product.jpg

# 감사: 디렉토리에서 레이블이 누락된 이미지 찾기
exiftool -if 'not $XMP-iptcExt:DigitalSourceType' \
  -filename -DigitalSourceType *.jpg *.webp *.png

Google은 다음 IPTC DigitalSourceType 값을 추출합니다:

• trainedAlgorithmicMedia: 완전히 AI 생성(확산 모델 제품 이미지에 사용)
• compositeSynthetic: 캡처 + AI 생성 요소 혼합
• algorithmicMedia: 알고리즘에 의해 순수하게 생성, 샘플링된 학습 데이터 아님

압축

# 품질 82로 JPEG 압축
jpegoptim --strip-all -m82 image.jpg

# PNG 압축
optipng -o7 image.png

# 손실 없는 WebP 압축(이미 WebP인 경우)
exiftool -all= image.webp  # 불필요한 메타데이터 제거

지침

1. 항상 원본 파일의 백업을 만드세요: cp image.jpg image.jpg.bak
2. WebP를 기본 대상 형식으로 사용(-q 82)
3. 사진 콘텐츠에는 AVIF를 사용(최상의 압축, 더 느린 인코딩)
4. 최적화 후 항상 시각적 품질을 확인: identify -verbose output.webp | grep Quality
5. 한 번에 하나의 이미지 최적화 명령 실행(병렬 실행하지 않음)

ImageMagick 변환 품질 팁

ImageMagick convert의 -quality는 JPEG, PNG, WebP, TIFF에 따라 다르게 동작합니다:

• JPEG/WebP: 숫자는 압축 수준(100=최고 품질, 0=최저 품질)
• PNG: 실제로는 zlib 압축 수준(100=최대 압축, 0=압축 없음)이며 품질이 아닙니다! PNG를 WebP로 올바르게 변환하려면 항상 -quality를 지정하세요.

# 올바른 PNG->WebP 변환
convert input.png -quality 82 output.webp

# 올바른 품질 확인: 압축은 크기를, -quality는 시각적 선명도를 결정합니다.