[Responsive] 반응형 이미지 작업 / img 태그 속성(srcset, sizes, picture)

srcset 속성

• 여러 크기 혹은 해상도의 이미지를 한 곳에 모아둔 것
• 브라우저가 자신의 화면 환경에 가장 적합한 이미지를 골라서 다운로드함
• ex) 480w, 800w, 1200w)는 이미지 각각의 너비(픽셀 단위)를 뜻함
• 브라우저는 뷰포트 크기, 해상도 등을 고려해 적절한 이미지를 선택

<img src="기본이미지.jpg" 
     srcset="이미지-작은.jpg 480w, 이미지-중간.jpg 800w, 이미지-큰.jpg 1200w" 
     alt="예시 이미지">

단위 (width descriptor, 너비 단위

1. w 단위 (width descriptor, 너비 단위)

• 이미지의 가로 길이(px)를 나타냄
• 브라우저가 뷰포트 크기와 sizes 속성을 참고해서 가장 적절한 너비 이미지를 선택

<img src="image-small.jpg" 
srcset="image-small.jpg 400w, image-medium.jpg 800w, image-large.jpg 1200w">

2. x 단위 (pixel density descriptor, 픽셀 밀도 단위)

• 기기 픽셀 밀도 비율(DPR, device pixel ratio)을 의미함
• 표준 해상도(1x), 레티나 해상도(2x), 초고해상도(3x) 대응 가능
• 브라우저가 현재 기기 픽셀 밀도를 보고 적절한 이미지를 고름
• 1x: 표준 해상도 이미지
• 2x: 2배 해상도 이미지 (레티나)
• 3x: 3배 해상도 이미지

<img src="image-1x.jpg" 
srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x" alt="픽셀 밀도별 이미지">

---

sizes 속성

• 뷰포트에 따라 이미지가 차지하는 예상 너비(픽셀 단위)를 지정하는 역할
• 브라우저는 이 정보를 참고해 srcset에 명시된 여러 이미지 중에서 최적의 이미지를 선택

<img src="small.jpg" 
     srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w" 
     sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px" 
     alt="예시 이미지">
     
 <!-- 
 - 뷰포트가 600px 이하일 때 이미지는 480px 공간 차지
 - 601~900px 사이면 800px 공간 차지
 - 그 이상은 1200px 공간 차지
     -->

테스트 소스

<img
  src="https://cdn.pixabay.com/photo/2025/06/02/21/36/cat-9637984_1280.jpg"
  srcset="
    https://cdn.pixabay.com/photo/2022/12/16/16/28/drinking-cups-7660115_640.jpg 400w,
    https://cdn.pixabay.com/photo/2025/06/05/island-2722471_1280.jpg 800w,
    https://cdn.pixabay.com/photo/2025/06/02/21/36/cat-9637984_1280.jpg 1280w
  "
  sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1280px"
  alt="테스트 이미지">

---

srcset, sizes 속성 사용 시 유의사항

구분	내용	설명
sizes 사용	srcset의 w 단위와 반드시 함께 사용	- sizes 없으면 브라우저가 이미지 크기 판단 불가, 최적 이미지 선택 어려움
조건 순서와 기본값	미디어 쿼리 조건은 위에서 아래로 평가, 기본값 필수	예: (max-width: 600px) 480px, (max-width: 900px) 800px, 1200px 기본값 없으면 900px 이상 미대응
이미지 크기 정확성	w 단위는 실제 이미지 가로 픽셀 크기와 일치해야 함	실제 이미지 사이즈와 맞지 않으면 잘못된 이미지가 선택될 수 있음
최적화	이미지 포맷과 용량 최적화 필수	WebP, 압축 활용, 너무 많은 크기 변형본은 피하기
캐싱	변경 후 캐시 문제 주의	개발 중 강력 새로고침 또는 캐시 비우기 필요
단위 혼용 주의	w 단위와 x 단위 혼용 피하기	혼용 시 브라우저 선택 혼란, 용도에 맞게 구분 사용 권장
<picture> 활용	완전히 다른 이미지 교체 필요 시 <picture> 태그 사용 권장	<source> 내 srcset, sizes 같이 쓸 수 있음
호환성	구형 브라우저 미지원 가능성	폴리필 사용 또는 기본 src 이미지 제공으로 대체

---

<picture> 태그

• srcset과 달리 미디어 쿼리 조건에 따라 완전히 다른 이미지 소스를 지정할 수 있는 태그
• 주로 디자인이나 내용이 모바일/데스크톱에서 완전히 달라질 때 사용
• <picture>는 특정 상황에서 이미지를 완전히 바꿔야 할 때만 사용 (과도하게 쓰면 유지보수 어려움)
• <source> 요소마다 다른 srcset과 media 쿼리를 넣을 수 있음
• 브라우저는 조건에 맞는 첫 번째 <source> 이미지를 사용
• 조건이 맞는 <source>가 없으면 <img> 태그의 src를 기본으로 사용
• srcset 속성도 쓸 수 있으므로, <source> 내에서도 반응형 이미지 제공 가능

<picture>
  <source srcset="image-mobile.jpg" media="(max-width: 600px)">
  <source srcset="image-tablet.jpg" media="(max-width: 900px)">
  <source srcset="image-desktop.jpg" media="(min-width: 901px)">
  <img src="image-default.jpg" alt="예시 이미지">
</picture>

활용 상황

 

• 모바일에는 가로형 이미지 대신 세로형 이미지 보여주고 싶을 때
• 특정 해상도 이상에서는 고화질 이미지로 교체할 때
• 아예 모바일/데스크톱에서 다른 이미지를 보여줄 때

---