main-logo

반응형 이미지 완전 정리

srcset + sizes 활용법

profile
hsun
2025년 11월 30일 · 0 분 소요

반응형 이미지 완전 정리: srcset + sizes 활용법

 

들어가며

웹사이트를 제작할 때, 다양한 디바이스와 화면 크기에 대응하는 것은 필수 과제입니다.
단일 고해상도 이미지만 제공하면 모바일 사용자에게 불필요한 데이터 전송과 느린 로딩을 유발할 수 있습니다.
이번 글에서는 srcset + size속성을 활용한 반응형 이미지 구현 방법을 자세히 살펴보고, 코드 예시와 실무 활용 팁까지 정리 했습니다.
웹 퍼포먼스 최적화와 다양한 화면 대응을 고민하는 개발자라면 참고할 수 있는 내용입니다.

 

1) srcset 이란

  • 요소에 여러 후보 이미지를 지정할 수 있는 속성입니다.
  • 각 후보 이미지는 너비정도 또는 픽셀 밀도 정보를 디스크립터로 지정합니다.
  • 브라우저는 현재 뷰포트 크기, 디바이스 해상도, 네트워크 상태 등을 고려해 가장 적합한 이미지를 자동 선택합니다.

예시 코드

<img src="img-800.jpg" srcset="img-400.jpg 400w,  img-800.jpg 800w, img-1600.jpg 1600w" alt="메인 배너 이미지">
  • 후보: img-400.jpg (400w), img-800.jpg (800w), img-1600.jpg (1600w)
  • 브라우저는 조건에 맞는 이미지를 선택해 로드합니다.

 

2) sizes가 필요한 이유

  • 너비 디스크립터를 사용하면, 브라우저가 어떤 후보를 선택할지 결정할 때 이미지가 화면에서 차지하는 실제 영역(slot width) 정보를 필요로 합니다.
  • size속성은 이 slot width를 정의하며, 미디어쿼리 활용해 화면 구간별 slot width를 지정할 수 있습니다.

예시 코드

<img src="img-800.jpg" srcset="img-400.jpg 400w,  img-800.jpg 800w, img-1600.jpg 1600w" sizes="(max-width: 600px) 100vw, 600px" alt="이벤트 배너 이미지">

  • (max-width: 600px) 100vw  → 뷰포트 ≤ 600px이면 이미지가 화면 전체 폭 사용
  • 나머지 경우 → 이미지 공간 600px 고정

브라우저는 slot width를 계산하고, 후보 이미지 중 가장 근접한 크기를 선택합니다.

 

3) 브라우저 동작 흐름

 
1. sizes 해석 → slot width 계산
2. srcset 후보 확인 
3. slot width + 디바이스 해상도(DPR) 고려 → 최적 후보 선택 
4. 해당 이미지 리소스 로드
  • 모바일 + 저해상도 → 용량 작은 이미지 로드
  • 데스크탑 / 고해상도 → 고해상도 이미지 로드
  • 결과: 데이터 절약 + 로딩 최적화 + 화질 유지

 

4) 간단 구현 예시

 
<img src="img-800.jpg" srcset="img-400.jpg 400w,  img-800.jpg 800w, img-1600.jpg 1600w" sizes="(max-width: 768px) 100vw, 750px" alt="서비스 배너 이미지">
  • 모바일(≤ 768px): 400w 또는 800w 후보 자동 선택
  • 데스크탑: slot 750px → 800w 후보 선택


5) 실무 활용 예시

  1. 블로그 배너 이미지 → 화면 크기에 맞춰 후보 이미지 선택

  2. 제품 상세 이미지 → 모바일/데스크탑에서 최적 이미지 제공

 

마치며

srcset과 size는 현대 웹에서 반응형 이미지를 효율적으로 제공하기 위한 필수 기술입니다.
이를 활용하면 불필요한 데이터 전송을 줄이고, 다양한 화면 환경에서 최적 이미지를 자동으로 제공할 수 있습니다.
코드 예시와 실무 활용 예시를 참고하여 실제 프로젝트에 적용한다면 이미지 최적화의 길에 한걸음 더 다가갈 수 있을 것 입니다.

 

참고 문헌 / 공식 문서