반응형 웹 디자인에서 흔히 저지르는 실수는 1920px 데스크톱용 대용량 이미지를 모바일 브라우저에 내려보낸 뒤 CSS width 100%로 크기만 축소하는 것입니다. 이는 모바일 사용자의 데이터 요금과 메모리를 심각하게 낭비합니다.
웹 개발 표준
반응형 이미지 srcset sizes 속성과 최적 해상도 지정
모바일, 태블릿, 데스크톱 등 디바이스 뷰포트와 DPR(디바이스 픽셀 비율)에 맞춰 최적 규격 이미지를 서빙하는 반응형 마크업 표준을 정리합니다.
imageconv 기술 연구팀· Frontend Performance Specialist
발행 2026-08-19
읽는 시간 6분
목차 바로가기
핵심 스펙 및 성능 비교 매트릭스
| 구현 방식 | 주요 용도 | 브라우저 선택 메커니즘 | 작성 복잡도 |
|---|---|---|---|
| 단일 src | 크기가 고정된 단순 에셋 | 단일 고정 파일 무조건 요청 | 매우 단순 |
| img srcset sizes | 동일 비율의 해상도별 가변 서빙 | 뷰포트 너비와 DPR 곱연산 판단 | 중간 |
| picture source type | 포맷 협상 AVIF WebP JPG | 브라우저 디코더 지원 여부 순차 검사 | 중간 |
| picture source media | 아트 디렉션 모바일 데스크톱 구도 변경 | 미디어 쿼리 일치 여부 판별 | 높음 |
온디맨드 브라우저 무료 변환
웹사이트 이미지를 WebP로 지금 즉시 변환해 보세요
설치나 회원가입 없이 브라우저 메모리 안에서 용량을 70% 줄이고 구글 코어 웹 바이탈을 개선할 수 있습니다.
자주 묻는 질문과 답변
sizes 속성을 생략하면 어떻게 동작하나요?
sizes가 생략되면 브라우저는 기본값으로 100vw 전체 화면 너비를 가정하므로, 3단 그리드의 작은 이미지라도 불필요하게 큰 해상도를 다운로드하게 됩니다.
관련 키워드 태그
반응형 이미지srcset sizesDPR 최적화HTML img 태그Picture 태그
함께 읽으면 좋은 연관 칼럼
LCP 코어웹바이탈 이미지 최적화 및 로딩 속도 단축
구글 검색 순위의 핵심 평가 요소인 Largest Contentful Paint(LCP) 지표를 2.5초 이내로 단축하기 위한 이미지 압축, 우선순위 힌트, CDN 전략을 제시합니다.
CLS 레이아웃 이동 방지와 이미지 종횡비 고정 기법
이미지 다운로드 전 레이아웃이 덜컥거리는 CLS(Cumulative Layout Shift) 문제를 CSS aspect-ratio 및 너비/높이 속성으로 완벽히 해결하는 가이드입니다.
Nextjs Image 컴포넌트 자동 최적화와 ISR 연동
Next.js의 next/image 컴포넌트 내부 동작 원리, On-Demand 이미지 리사이징, Vercel CDN 캐싱 및 원격 도메인 보안 설정을 심층 분석합니다.