<source> — 미디어 태그 도감

올바른 사용

picture·video·audio의 자식으로만

srcset(picture)·src(video/audio) 필수

type·media 속성으로 조건

fallback img/video 본문에 항상

picture의 source (포맷 fallback)

<picture>
  <source srcset="/img.avif" type="image/avif" />
  <source srcset="/img.webp" type="image/webp" />
  <img src="/img.jpg" alt="..." />
</picture>

type 속성으로 포맷 fallback.

video의 source (codec fallback)

<video controls>
  <source src="/video.mp4" type="video/mp4" />
  <source src="/video.webm" type="video/webm" />
  <track src="/captions.vtt" kind="captions" />
</video>

여러 codec fallback. track은 자막.

picture의 source (art direction)

<picture>
  <source srcset="/hero-mobile.jpg" media="(max-width: 640px)" />
  <source srcset="/hero-desktop.jpg" media="(min-width: 641px)" />
  <img src="/hero.jpg" alt="..." />
</picture>

화면 크기별 art direction.

자주 보는 안티패턴

독립적으로 사용 (반드시 부모 필요)

alt 속성 박기 (alt는 img에)

src와 srcset 혼동

media 쿼리 우선순위 잘못

독립 사용

<source srcset="/img.avif" type="image/avif" />

부모 picture/video/audio 없이는 의미 없음.

source에 alt

<picture>
  <source srcset="/img.avif" alt="설명" />
</picture>

alt는 img에만. source의 alt 무시.

해설

picture·video·audio의 조건부 자식 소스. 부모 컨테이너의 미디어 선택지를 정의하지만 — 그 자체로는 의미가 없다. 부모 + source들 + fallback의 구조에서 한 부분.

SEO 관점에서 source는 Core Web Vitals 최적화에 기여. picture에서 AVIF/WebP source가 우선 적용되면 이미지 파일 크기 감소 → LCP 점수 개선. video에서 codec fallback이 정확하면 재생 실패 감소 → 사용자 신호.

GEO 관점에서 AI 인덱서는 보통 fallback 미디어(picture의 img, video의 컨테이너)를 사용. source가 직접 인덱싱되지는 않지만 모던 포맷이 fallback에 가깝게 같은 콘텐츠일 때만 의미.

A11y 관점에서 source 자체는 a11y에 직접 영향 없음. 부모 img/video/audio의 alt·captions·controls가 a11y를 결정.

자주 보는 안티패턴: 독립 사용(반드시 부모 필요), source에 alt(alt는 img에만 — source의 alt는 무시), src와 srcset 혼동(picture의 source는 srcset, video/audio의 source는 src — 서로 다름), media 쿼리 우선순위 잘못(브라우저가 첫 매칭 source를 선택 — 작은 미디어 쿼리부터 큰 순서로).

picture의 source vs video/audio의 source:

picture: 여러 source 중 조건 매칭되는 하나만 사용 — 포맷 fallback 또는 art direction
video/audio: 여러 source 중 브라우저가 재생 가능한 첫 번째 사용 — codec fallback

type 속성 — MIME 타입 명시. 브라우저가 지원 가능 여부를 빠르게 판단하고 다운로드 안 함. 누락 시 브라우저가 각 source를 시도하므로 네트워크 비용 ↑.

media 속성 — 미디어 쿼리. art direction이나 다크모드 대응에. picture에서만 사용 — video/audio에는 없다.

srcset 속성 — 같은 이미지의 다른 해상도. srcset="img-1x.jpg 1x, img-2x.jpg 2x". picture의 source에 사용.

video/audio의 source 순서 — 모던 codec 우선. webm(VP9/AV1) → mp4(H.264). 브라우저가 webm 지원하면 사용, 안 하면 mp4 fallback. 같은 콘텐츠를 두 codec로 인코딩해 두는 추가 작업이지만 파일 크기 차이가 큰.

sizes 속성 — 화면 크기별 표시 크기 지정. srcset과 함께 적절한 해상도 자동 선택. 반응형 이미지의 표준 패턴.

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

SEO

GEO

AEO

A11y

올바른 사용

자주 보는 안티패턴

해설