<picture> — 미디어 태그 도감

올바른 사용

source 여러 개 + img 한 개 (fallback)

source media 또는 type 속성으로 조건

img는 항상 마지막에 (fallback)

alt는 img에만

AVIF/WebP fallback

<picture>
  <source srcset="/hero.avif" type="image/avif" />
  <source srcset="/hero.webp" type="image/webp" />
  <img
    src="/hero.jpg"
    alt="회의실의 다섯 명이 토론하는 장면"
    width="1200"
    height="630"
  />
</picture>

모던 포맷 우선, JPG fallback. 알트는 img에만.

반응형 (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>

화면 크기별 다른 크롭 이미지.

다크모드 대응

<picture>
  <source srcset="/logo-dark.svg" media="(prefers-color-scheme: dark)" />
  <img src="/logo-light.svg" alt="회사 로고" />
</picture>

다크모드 자동 전환.

자주 보는 안티패턴

source에 alt (img에만)

img fallback 누락

AVIF/WebP 우선순위 잘못 (modern format 먼저)

art direction과 resolution switching 혼용

img fallback 누락

<picture>
  <source srcset="/hero.avif" type="image/avif" />
  <source srcset="/hero.webp" type="image/webp" />
</picture>

모든 source 미지원 환경에서 이미지 안 뜸. 알트도 사라짐.

source에 alt

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

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

해설

여러 이미지 소스 중 조건에 맞는 것을 선택하는 컨테이너. 반응형 이미지, 포맷별 fallback, 다크모드 대응 같은 조건부 이미지가 필요할 때.

SEO 관점에서 picture는 Core Web Vitals의 LCP 개선에 직접 기여. AVIF·WebP 같은 모던 포맷이 우선 적용되어 이미지 파일 크기 30-50% 감소. 같은 시각 품질을 빠르게 로드.

GEO 관점에서 AI 인덱서가 이미지를 가져올 때 어느 source를 가져가는가는 환경별로 다르다. 대부분의 인덱서가 img fallback을 사용하므로 — fallback 이미지의 품질이 AI에 보이는 이미지.

A11y 관점에서 picture의 a11y 직접 영향은 적다. 다만 다크모드 자동 전환은 시각 사용자의 피로 감소에 직접 기여. prefers-color-scheme 미디어 쿼리로 자동.

자주 보는 안티패턴: img fallback 누락(모든 source 미지원 환경에서 이미지 사라짐), source에 alt(alt는 img에만 — source의 alt는 무시), 모던 포맷 우선순위 잘못(AVIF → WebP → JPG 순서가 표준 — 큰 파일 fallback이 위에 있으면 의미 없음), art direction과 resolution switching 혼용(art direction은 picture, resolution switching은 img srcset).

source 속성들:

srcset — 이미지 URL (필수)
type — MIME 타입 (image/avif, image/webp 등 — 포맷 fallback에)
media — 미디어 쿼리 (max-width, prefers-color-scheme 등 — art direction에)
sizes — 화면 크기별 표시 크기 (resolution switching에)

art direction vs resolution switching:

Art direction: 화면 크기별로 다른 크롭/구도의 이미지 (picture + source media 사용)
Resolution switching: 같은 이미지의 다른 해상도 (img + srcset만으로 충분 — picture 불필요)

Next.js Image와의 결합 — Next.js Image가 내부적으로 picture로 렌더되어 AVIF/WebP 자동 fallback. 직접 picture를 쓰는 경우는 art direction이나 다크모드 대응 같은 특수 케이스.

fetchpriority="high" — LCP 이미지의 picture에 추가. 브라우저가 가장 중요한 이미지임을 인식해 우선 로드. Chrome 102+ 지원.

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

SEO

GEO

AEO

A11y

올바른 사용

자주 보는 안티패턴

해설