picture 태그 — 화면 크기에 따라 다른 이미지 보내기 완전 정리

 

 

Web Development · picture / srcset

picture 태그 — 화면 크기에 따라 다른 이미지 보내기

source media · srcset · img fallback · 트래픽 절감의 정석

시작 오늘 분석할 코드

가변 이미지의 진짜 문제는 트래픽이다. 데스크톱용 1920px 이미지를 모바일에 그대로 보내면 모바일에선 보이지도 않는 픽셀까지 다운로드한다. <picture> 태그는 화면 크기·해상도에 따라 다른 이미지 파일을 골라 받게 한다.

<picture> <source srcset="images/shop-large.jpg" media="(min-width:1024px)"> <source srcset="images/shop-medium.jpg" media="(min-width:768px)"> <source srcset="images/shop-small.jpg" media="(min-width:320px)"> <img src="images/shop.jpg" alt="fill with coffee" style="width:100%;"> </picture>

실제 출력 미리보기 — 창 너비를 늘렸다 줄여 보세요

화면 폭에 따라 자동 선택 ↑ 윈도우 크기 변경 시 색상이 바뀝니다

실제로는 같은 이미지 파일을 작은/중간/큰 해상도로 3개 준비해 화면별로 다른 파일을 보내는 것

용어 용어 정리

<picture>반응형 이미지 컨테이너

<source>조건별 이미지 후보

srcset실제 이미지 URL 지정

media미디어쿼리 조건

img fallbackpicture 미지원 시 대체

art direction화면별 다른 구도·잘림 이미지

resolution switching같은 그림 다른 해상도

트래픽 절감모바일은 작은 파일만 받음

---

1 위에서 아래로 첫 매칭이 채택된다

브라우저는 <source>를 위에서 아래로 차례로 검사해서 첫 번째로 조건이 맞는 것을 사용한다. 그래서 큰 조건을 위에, 작은 조건을 아래에 배치해야 한다.

[브라우저의 결정 흐름] 화면 폭이 1500px일 때: 1. (min-width:1024px) ← 매칭 ✓ → shop-large.jpg 사용 화면 폭이 800px일 때: 1. (min-width:1024px) ← 매칭 X 2. (min-width:768px) ← 매칭 ✓ → shop-medium.jpg 사용 화면 폭이 400px일 때: 1. (min-width:1024px) ← 매칭 X 2. (min-width:768px) ← 매칭 X 3. (min-width:320px) ← 매칭 ✓ → shop-small.jpg 사용

※ 순서가 거꾸로면 망한다. (min-width:320px)를 맨 위에 두면 320px 이상 모든 화면에서 가장 작은 small.jpg를 받는다 — 데스크톱도 모바일 화질로 보임.

---

2 img는 fallback이자 기본값

마지막의 <img>는 두 가지 역할을 한다.

역할	설명
fallback	옛 브라우저(picture 미지원)가 source를 무시하고 img만 사용
기본 후보	모든 source 조건이 매칭 안 될 때(예: 화면 320px 미만)도 이걸 사용
속성 상속	alt, width, style 등은 img에서 받음 — 실제 화면에 그려지는 건 결국 img

※ <picture> 안에 반드시 <img>가 하나 있어야 한다. 빠뜨리면 picture 자체가 안 보인다.

---

3 왜 picture가 필요한가? — 두 가지 이유

resolution switching

같은 그림이지만 화면 크기에 맞는 해상도로 보내기
→ 트래픽 절감 + 빠른 로딩

art direction

화면별로 다른 구도의 이미지 — 모바일은 인물 클로즈업, 데스크톱은 배경까지

※ resolution vs art direction 어떻게 구분하나

• 같은 그림 다른 크기가 목적이면 → 단순 img srcset으로 충분
• 화면별로 잘린 모양·구도가 달라야 한다면 → picture + source media
• 이번 코드는 같은 shop을 단순히 다른 크기로 보내는 거라 사실 srcset만으로도 됨

---

 

반응형

 

4 srcset 단축 표기

resolution switching만 필요하면 <img srcset> 한 줄이 더 간결하다.

<img src="shop.jpg" srcset="shop-small.jpg 320w, shop-medium.jpg 768w, shop-large.jpg 1024w" sizes="(max-width: 600px) 100vw, (max-width: 1024px) 50vw, 33vw" alt="fill with coffee">

요소	의미
320w	이 이미지의 실제 폭이 320px이라는 힌트
sizes	각 화면 조건에서 이 이미지가 차지할 공간
vw	viewport width — 100vw는 화면 폭 100%
브라우저 판단	위 정보로 자동으로 가장 적합한 파일 선택

---

5 자주 하는 실수

실수	증상	해결
source 순서 거꾸로	모든 화면이 가장 작은 이미지 받음	큰 조건이 위로 — 위에서 첫 매칭 채택
img 누락	picture 안 보임	fallback img 필수
alt를 source에 둠	img에만 alt가 의미	img에 alt
type 누락	WebP 등 신형 포맷 fallback 안 됨	type="image/webp" 같이 명시
같은 파일을 여러 source에	의미 없는 코드, 트래픽 동일	실제 다른 크기·포맷 파일 준비
media 표기 오류	조건 무시	(min-width: 768px) 형식, 괄호 필수

---

6 현대식 모범 — picture + WebP/AVIF + img

<picture> <source type="image/avif" srcset="hero-large.avif 1024w, hero-medium.avif 768w, hero-small.avif 320w"> <source type="image/webp" srcset="hero-large.webp 1024w, hero-medium.webp 768w, hero-small.webp 320w"> <img src="hero.jpg" srcset="hero-large.jpg 1024w, hero-medium.jpg 768w, hero-small.jpg 320w" sizes="(max-width: 768px) 100vw, 50vw" alt="..." width="1024" height="768" loading="lazy"> </picture>

※ 이 패턴의 장점

• 최신 브라우저 → 가장 효율적인 AVIF (jpg 대비 50% 작음)
• 중간 브라우저 → WebP (jpg 대비 25~30% 작음)
• 옛 브라우저 → JPG fallback
• 화면 크기 따라 적절한 해상도
• loading="lazy"로 화면 밖 이미지 지연 로딩

---

핵심 한 줄 요약

<picture>반응형 이미지 컨테이너

source 순서큰 조건이 위 — 첫 매칭 채택

img fallbackpicture 안에 반드시 1개 — 실제 그려지는 요소

media 조건미디어쿼리로 화면 분기

srcset 단축resolution만이면 img 한 줄로

art direction화면별 다른 구도 → picture 필수

실무 표준AVIF/WebP/JPG + srcset + lazy loading

Tags

#picture #source #srcset #media #반응형이미지 #art-direction #AVIF #WebP #lazy-loading #img-fallback #트래픽절감 #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

picture, source, srcset, media, 반응형이미지, art-direction, AVIF, WebP, lazy-loading, img-fallback, 트래픽절감, CSS, HTML, 웹개발, 티스토리