<img> — 미디어 태그 도감

올바른 사용

모든 img에 alt 속성 필수

장식 이미지는 alt 빈 문자열

width·height로 CLS 방지

loading=lazy로 첫 화면 외 지연 로딩

정보 이미지

<img
  src="/charts/q2-revenue.png"
  alt="2026년 Q2 매출 14.8억 원, 전년 대비 18% 증가"
  width="800"
  height="400"
  loading="lazy"
/>

alt에 이미지가 전달하는 정보. width/height로 레이아웃 안정.

장식 이미지

<img
  src="/decorations/divider.svg"
  alt=""
  width="400"
  height="4"
/>

장식은 alt 빈 문자열. 누락 아닌 명시적 빈.

Next.js Image

<Image
  src="/heroes/main.jpg"
  alt="고객 만족도 발표 시점의 비즈니스 팀"
  width={1200}
  height={630}
  priority
/>

Next.js Image는 alt가 필수 prop. 자동 최적화 포함.

자주 보는 안티패턴

alt 속성 누락

alt에 파일명 그대로

width·height 누락으로 CLS

OG 이미지 alt 누락

alt 누락

<img src="/banners/main-hero.jpg" />

스크린리더가 파일명 발화. Google Images 인덱싱 손해.

alt에 파일명

<img src="/hero.jpg" alt="hero" />

의미 없는 텍스트. SEO·a11y 모두 0.

해설

이미지의 가장 기본 태그. 시리즈 #8에서 alt 속성을 깊이 다뤘다. alt + src + width/height + loading이 모던 img의 표준 5요소.

SEO 관점에서 img는 Google Images 인덱싱의 1순위 신호. alt 텍스트가 이미지 검색 결과의 ranking에 직접 작용. 사이트가 이미지 검색에서 트래픽을 받는다면 — alt 최적화가 직접적 SEO 작업.

GEO 관점에서 AI Overviews가 답변에 이미지를 함께 노출할 때 — alt가 좋은 페이지에서 이미지 인용. "2026 SEO 트렌드" 답변 옆에 차트가 함께 뜨는데 그 차트의 원본이 alt 잘 박힌 페이지.

AEO 관점에서 Featured Snippet에도 이미지가 함께 노출되는 경우 증가. alt + 주변 텍스트 + 파일명의 조합이 인용 신호.

A11y 관점에서 가장 critical. 시각장애 사용자가 이미지 정보에 접근하는 유일한 경로가 alt. WebAIM Million에서 alt 누락은 매년 상위 결함.

자주 보는 안티패턴: alt 누락(파일명 발화), alt에 파일명·"이미지"·"사진"(무의미), width/height 누락(이미지 로딩 시 layout shift = CLS 점수 손해), OG 이미지 alt 누락(시리즈 #8에서 다룬 OG 자동 생성 파이프라인의 alt도 자동 생성).

loading="lazy" — 첫 화면 외 이미지에 지연 로딩. LCP 점수 개선. 다만 첫 화면의 LCP 이미지는 loading="eager" 또는 속성 생략(eager가 기본).

decoding="async" — 이미지 디코딩을 비동기로. LCP 외 이미지에 권장.

srcset 속성 — 화면 크기별 해상도 이미지. <img srcset="hero-1x.jpg 1x, hero-2x.jpg 2x">. 레티나 디스플레이 대응.

Next.js Image 컴포넌트 — alt가 TypeScript 강제 prop. width/height 자동 처리, lazy loading 기본, AVIF/WebP 자동 변환. 일반 img보다 실수 확률이 낮은 선택.

장식 이미지의 alt — alt=""로 명시적인 빈 문자열. alt 누락과 의미가 다르다 — 누락은 파일명 발화, 빈 alt는 조용히 건너뜀. 장식임을 의도적으로 명시.

SEO·GEO·AEO·A11y 4축에서의 의미

SEO

GEO

AEO

A11y

올바른 사용

자주 보는 안티패턴

해설