[HTML] <picture> 태그 알아보기

웹 개발을 하면서 이미지들을 자주 다루게 되는데 그 이미지들은 포맷이 정말 다양하다.

시간이 흐르고 기술이 고도화되면서 새로운 이미지 포맷들도 생기곤 한다.

그런 흐름 속에서 유저가 사용하는 브라우저가 가장 최신 포맷의 이미지를 로드할 수 없는 이전 버전의 브라우저 일수도 있고

혹은 가장 최신 버전의 브라우저일수도 있다. 

그럼 이런 상황에서 다양한 포맷 그리고 브라우저에 따라 알맞게 이미지를 보여줄 수 있는 방법이 무엇이 있을까 찾아보니

<picture> 태그를 알게 되었다. 

이번 게시글에서는 <picture> 태그에 대해서 알게된 내용들을 기록해보려고 한다!

---

우선 <picture> 태그는 무엇일까?

<picture> 태그는 한마디로 “상황에 따라 다른 이미지를 보여줄 수 있게 해주는” html 태그이다.

안에는 여러 개의 <source> 태그랑, 마지막에 기본 이미지를 담고 있는 <img> 태그 하나가 들어간다.

 

브라우저는 이 안의 <source>들을 차례로 살펴보면서,
“음, 지금 너한테 제일 잘 맞는 이미지는 이거네!” 하고 가장 알맞은 걸 고른다.

만약 조건에 맞는 게 하나도 없거나, <picture> 자체를 지원하지 않는 구형 브라우저라면?
그럴 땐 그냥 <img> 태그에 있는 이미지를 보여준다. 

 

결국 어떤 이미지가 선택되든, 화면에는 <img>가 차지하고 있는 그 자리에 최종 이미지가 깔리는 것이다.

 

그럼 예제를 통해 함께 알아보자!

<picture>
  <source
    srcset="/shared-assets/images/examples/surfer.jpg"
    media="(orientation: portrait)" />
  <img src="/shared-assets/images/examples/painted-hand.jpg" alt="" />
</picture>

위 코드를 보면 <picture> 안에 <source> 하나랑 <img> 하나가 들어 있다.

이때 브라우저는 <source>의 srcset, media, type 속성을 차례로 살펴보면서
“지금 내 화면 환경에 맞는 이미지는 뭐지?” 하고 가장 알맞은 이미지를 고른다.

 

예를 들어 위 예제에서는 media="(orientation: portrait)" 조건이 붙어 있으니까,
만약 사용자의 디바이스가 세로 방향(portrait) 이라면 surfer.jpg 이미지를 불러오게 된다.
그게 아니면 그냥 <img>의 painted-hand.jpg가 표시되는 것이다.

 

<img> 태그의 역할

이때 <img>는 단순히 “기본 이미지”만 담당하는 게 아니다.

역활은 아래와 같이 2가지이다.

 

1. 이미지의 기본 속성과 크기를 정의
(width, height, alt 등 — 화면에 어떻게 보일지 결정하는 역할)

 

2. 대체 이미지(fallback)
브라우저가 <source> 조건에 맞는 이미지를 못 찾거나 <picture>를 지원하지 않을 때 대신 표시된다.

 

<picture>를 쓰는 대표적인 이유들

1. 아트 디렉션(Art direction) — 화면 크기에 따라 다른 구도를 보여줄 수 있다.
예: 모바일에서는 단순한 이미지, 데스크탑에서는 전체 구도 이미지.

 

2. 이미지 포맷 대응 — 브라우저별로 지원하는 포맷이 다를 때 대체 포맷 제공.
(예: WebP, AVIF는 빠르고 용량이 작지만, 구형 브라우저에선 지원 안 될 수 있음.

 

3. 대역폭 절약 & 로딩 속도 향상 
화면에 딱 맞는 이미지만 불러오니까 불필요한 용량 낭비가 줄어든다.

---

<picture> 태그 안에 들어가는 <source>는 “이 조건일 때 이 이미지를 써줘!” 라는 규칙을 브라우저에게 알려주는 역할을 하는데

어떤 속성을 사용하느냐에 따라 선택 기준이 달라진다.

아래의 예제들을 통해 알아보자!

 

1. media 속성 - 미디어 조건에 따라 이미지 바꾸기

media 속성은 CSS의 미디어 쿼리(media query) 처럼 작동한다.
현재 뷰포트(화면 크기, 방향 등)에 따라 특정 이미지를 보여줄지 말지를 결정한다.

<picture>
  <source srcset="mdn-logo-wide.png" media="(width >= 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN" />
</picture>

위 코드에서는 뷰포트 너비가 600px 이상이면 mdn-logo-wide.png가 표시되고,
그보다 작으면 <img>의 기본 이미지(mdn-logo-narrow.png)가 사용된다.

 

즉, 브라우저가 media 조건을 하나씩 검사하면서 “이건 맞네” 싶은 이미지를 골라서 보여주는 구조이다.

 

2. srcset 속성 — 해상도·크기에 따라 다른 이미지 제공

srcset은 “이 상황이면 이 이미지 써!” 라는 식으로 여러 이미지를 한 줄에 정의할 수 있는 속성이다.

콤마(,)로 구분해서, 각 이미지 뒤에 ‘설명자(descriptor)’ 를 붙인다.

예를 들어 

• 300w → 너비 300px 이미지를 가르키고
• 2x → 고해상도(2배 픽셀 밀도) 이미지 가르킨다.

 

 

 

<picture>
  <source srcset="logo.png, logo-1.5x.png 1.5x" />
  <img src="logo.png" alt="MDN Web Docs logo" height="320" width="320" />
</picture>

위 코드는 일반 화면에서는 logo.png를, 고해상도(1.5x) 디스플레이에서는 logo-1.5x.png를 보여줄 수 있다.

 

추가로 srcset은 <picture> 안뿐 아니라 <img> 단독으로도 사용할 수 있다.

<img
  srcset="logo.png, logo-2x.png 2x"
  src="logo.png"
  alt="MDN Web Docs logo"
  width="320"
  height="320"
/>

 

3. sizes 속성 — 뷰포트 크기에 따른 표시 영역 크기 지정

sizes는 “화면이 이만큼일 땐 이미지를 이 크기로 표시해줘” 하는 힌트를 브라우저에 주는 속성이다.

이걸 함께 써주면 브라우저가 srcset에 있는 이미지 중 어떤 걸 다운로드해야 할지 더 정확히 판단할 수 있다.

 

이전의 설명한 srcset 과 헷갈릴 수 있다. (나는 헷갈렸었다...)

srcset → “이미지 파일 목록 + 각각의 크기 정보”
sizes → “현재 화면에서 이 이미지가 얼만큼의 공간(픽셀)을 차지할 것 같아!” 라는 힌트

이 두가지를 합쳐서 브라우저가 판단한다.

 

즉 브라우저는 

이 뷰포트 크기라면 이미지가 이 정도 크기로 표시되겠군 → 그럼 이 목록 중 가장 알맞은 해상도의 이미지를 골라야겠다! 라는 식으로 판단한다.

<picture>
  <source
    srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
    sizes="(max-width: 600px) 400px, 800px"
    type="image/jpeg" />
  <img src="fallback.jpg" alt="Example image" />
</picture>

 

이 코드를 브라우저에서 해석하면 아래와 같다.

 

1 단계. 브라우저가 sizes 평가

만약 뷰포트가 600px 이하라면,
→ 이미지는 화면에서 약 400px 정도 공간을 차지할 것

그보다 크면
→ 이미지는 약 800px 공간을 차지할 것.

 

즉 브라우저는 이 이미지가 화면에서 얼만큼 크기로 렌더링 될지를 파악한다.

 

2단계. srcset을 보고 가장 적합한 이미지 선택

small.jpg 480w, medium.jpg 800w, large.jpg 1200w

이건 각각 이미지의 실제 너비(width) 를 나타낸다.

 

예를 들어 뷰포트가 500px짜리 폰이라면:

• sizes에 따르면 이미지가 약 400px 영역에 표시될 예정이다.
• 만약 기기의 픽셀 비율이 2배(레티나 디스플레이)라면,
  실제로 필요한 건 400px × 2 = 800px짜리 이미지 인 것이다.

그래서 브라우저는 딱 보고 medium.jpg(800w)가 제일 적당하다! 라고 판단한다.

 

만약 size가 없다면?

브라우저는 “이 이미지가 화면에서 어느 정도 크기로 보일지”를 모르기 때문에,
그냥 기본값(= 이미지 원본 크기) 을 기준으로 판단한다.

그래서 너무 큰 이미지를 받아오거나, 너무 작은 이미지를 늘려 쓰는 일이 생길 수 있다.

 

4. type 속성 — 이미지 포맷 지정

type은 이미지의 MIME 타입을 명시해서 브라우저가 지원하는 형식만 골라서 로드하도록 돕는 속성이다.

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

이렇게 작성하면,

• 브라우저가 AVIF를 지원하면 photo.avif를
• 지원하지 않지만 WebP는 가능하면 photo.webp를
• 둘 다 안 되면 마지막 fallback인 photo.jpg를 보여준다.

즉, 최신 이미지 포맷을 우선 제공하면서도 호환성 문제 없이 안전하게 대응할 수 있는 것이다.

---

<picture> 태그를 공부하면서, 단순히 이미지를 출력하는 것 이상의 개념을 알게된것 같다.
이미지를 어떤 포맷으로, 어떤 크기로, 어떤 상황에서 보여줄지까지 세밀하게 제어할 수 있다는 점이 인상적이었다.

특히 media, srcset, sizes, type 속성의 조합을 보면서 브라우저가 환경에 따라 이미지를 얼마나 효율적으로 선택하는지를 알 수 있었다.

 

결국 이미지 최적화는 용량을 줄이는 문제를 넘어, 사용자에게 가장 적합한 이미지를 상황에 맞게 제공하는 일이라는 걸 깨달았다.

 

앞으로 반응형 웹이나 고해상도 디스플레이 대응 작업을 할 때 <picture> 태그를 적극적으로 활용해볼 생각이다.
이미지를 조금 더 의도적으로 보여주는 방향으로 접근하면, 웹의 품질과 사용자 경험 모두 개선될 수 있을 것이

 

 

 

 

 

 

 

[출처]

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture

<picture>: The Picture element - HTML | MDN