HTML Academy · 강의

srcset과 sizes를 사용한 반응형 이미지

화면 밀도에 맞는 크기의 이미지를 제공합니다.

srcset과 sizes를 사용한 반응형 이미지은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

단일 이미지의 문제

모든 기기에 하나의 큰 이미지를 제공하면 작은 화면에서 대역폭이 낭비됩니다.

화면 너비가 390px인 휴대전화에는 2400px 이미지가 필요하지 않습니다
4K 모니터에는 96dpi 이미지보다 더 높은 해상도의 이미지가 적합합니다
반응형 이미지는 적합한 화면에 적합한 이미지를 제공합니다

srcset 특성

srcset은 너비 정보가 포함된 이미지 소스 목록을 제공합니다.

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg  400w,
    photo-800.jpg  800w,
    photo-1600.jpg 1600w
  "
  alt="Mountain landscape"
>
<!-- 400w, 800w, 1600w = intrinsic widths of each file -->
<!-- Browser chooses the best match for the device -->
<!-- src is the fallback for browsers that don't support srcset -->

픽셀 밀도 설명자

크기가 고정된 이미지의 해상도가 여러 가지일 때 1x, 2x, 3x 설명자를 사용합니다.

<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"
  alt="Coddy logo"
  width="120"
  height="40"
>
<!-- 2x screens (Retina) get logo@2x.png -->
<!-- 3x screens (iPhone Pro) get logo@3x.png -->
<!-- 1x screens get logo.png -->

sizes 특성

sizes는 다양한 뷰포트 크기에서 이미지가 표시될 너비를 브라우저에 알려 줍니다.

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="Landscape photo"
>
<!-- At ≤600px viewport: image takes 100% of viewport width -->
<!-- At ≤1200px viewport: image takes 50% -->
<!-- Otherwise: image is 800px wide -->

브라우저가 이미지를 선택하는 방법

브라우저는 sizes 값 × 기기 픽셀 비율을 계산해 srcset에서 선택합니다.

600px 뷰포트, 2× DPR, size=100vw → 1200px 이미지 필요 → 1600w 선택
1200px 뷰포트, 1× DPR, size=50vw → 600px 이미지 필요 → 800w 선택
한 번 로드되면 브라우저가 캐시하므로 다시 로드하지 않을 수 있습니다

기본 sizes 값

sizes가 없으면 브라우저는 이미지가 뷰포트 전체 너비(100vw)를 차지한다고 가정합니다.

<!-- Without sizes: browser assumes 100vw -->
<!-- This causes it to download a very large image on wide screens -->
<!-- Always specify sizes if your image is not full-width -->

<img
  srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="100vw"  <!-- explicit full-width -->
  src="hero-1600.jpg"
  alt="Hero image"
>

srcset 너비 설명자와 x 설명자

srcset에는 두 가지 모드가 있습니다.

너비 설명자(w) — sizes와 함께 사용하며, 유동적이고 레이아웃을 고려해 선택함
픽셀 밀도 설명자(x) — 여러 해상도의 고정 크기 이미지에 사용함

대부분의 반응형 이미지에는 w 설명자를 사용하세요. 아이콘, 로고, 고정 크기 요소에는 x를 사용하세요.

srcset 파일 생성하기

반응형 이미지 변형을 생성하는 도구:

Sharp (Node.js) — 프로그래밍 방식의 이미지 크기 조정
Squoosh — 브라우저 기반 시각적 비교
Cloudinary / Imgix — 필요할 때 URL 기반으로 크기 조정
Webpack / Vite 플러그인 — 빌드 시 생성

WebP 및 대체 형식과 함께 사용하는 srcset

형식 대체를 위해 srcset을 <picture>와 함께 사용합니다.

<picture>
  <!-- Modern browsers: WebP -->
  <source
    type="image/webp"
    srcset="photo-400.webp 400w, photo-800.webp 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
  >
  <!-- Fallback: JPEG -->
  <img
    srcset="photo-400.jpg 400w, photo-800.jpg 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
    src="photo-800.jpg"
    alt="Mountain photo"
  >
</picture>

아트 디렉션과 해상도 전환

반응형 이미지 문제에는 두 가지 유형이 있습니다.

해상도 전환 — 같은 이미지의 해상도만 다름 → srcset + sizes 사용
아트 디렉션 — 화면에 따라 자르기나 구성이 다름 → <source media>와 함께 <picture> 사용

반응형 이미지 테스트

srcset이 제대로 작동하는지 확인하는 방법:

DevTools → 네트워크 탭 → 이미지로 필터링
기기 에뮬레이션을 설정해 다양한 뷰포트 크기와 DPR을 사용합니다
다시 로드하고 브라우저가 어떤 파일을 요청하는지 확인합니다
다음 항목도 확인합니다: Lighthouse → 성능 → 적절한 크기의 이미지 검사

srcset 브라우저 지원

srcset의 브라우저 지원은 매우 우수합니다.

모든 최신 브라우저(Chrome, Firefox, Safari, Edge)에서 지원됩니다
src 대체 항목이 오래된 브라우저를 처리합니다
실제 서비스에 사용할 때 폴리필이 필요하지 않습니다

확인 문제

sizes 특성은 이미지가 얼마나 넓게 표시될지 브라우저에 알려 줍니다.

복습: srcset과 sizes

반응형 이미지의 핵심:

srcset — 이미지 파일과 각 이미지의 고유 너비 또는 픽셀 밀도 목록
sizes — 이미지가 표시될 너비를 설명하는 미디어 조건
브라우저가 최적의 항목을 선택합니다: sizes 값 × 기기 DPR
유동적인 이미지에는 너비 설명자(w)를, 고정 크기 요소에는 x를 사용합니다
항상 대체 항목으로 src를 제공합니다

자주 묻는 질문

“srcset과 sizes를 사용한 반응형 이미지” 강의는 무료인가요?

네 — “srcset과 sizes를 사용한 반응형 이미지” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“srcset과 sizes를 사용한 반응형 이미지”에서 뭘 배우나요?

화면 밀도에 맞는 크기의 이미지를 제공합니다. 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“srcset과 sizes를 사용한 반응형 이미지” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← HTML Academy(으)로 돌아가기