반응형 이미지 srcset, 언제 써야 할까

이미지 압축으로 파일 용량을 줄이는 것과, srcset으로 디바이스에 맞는 이미지를 골라 보내는 것은 서로 다른 최적화입니다. 압축은 이미지 하나의 무게를 줄이는 작업이고, srcset은 애초에 "이 화면 크기에 이 정도 크기의 이미지면 충분하다"는 판단을 브라우저에 맡기는 작업입니다. 이 글에서는 srcset과 sizes 속성이 실제로 어떻게 작동하는지 설명하고, 실무에서 언제 도입할 가치가 있는지 정리합니다.

srcset과 sizes는 무엇을 하는가

기본 개념 — 브라우저가 이미지를 고르게 한다

일반적인 <img src="photo.jpg">는 화면 크기와 무관하게 항상 같은 파일을 내려받습니다. 모바일 화면 360px 폭에서도 데스크톱용 1600px 원본을 그대로 받는다면, 화면에 보이지도 않을 픽셀까지 다운로드하는 셈입니다. srcset은 같은 이미지를 여러 크기로 미리 준비해두고, 브라우저가 현재 화면 크기와 픽셀 밀도(DPR)에 맞는 가장 적절한 파일을 스스로 선택하게 만드는 속성입니다.

너비 기술자(w) 방식

실무에서 가장 흔히 쓰이는 방식은 각 이미지 파일의 실제 가로 폭을 w 단위로 명시하는 것입니다.

sizes는 "이 이미지가 화면에서 실제로 차지할 폭"을 브라우저에 미리 알려주는 힌트입니다. 위 예시는 "뷰포트가 600px 이하면 이미지가 화면 전체 폭(100vw)을 차지하고, 그보다 크면 화면의 절반(50vw)을 차지한다"는 뜻입니다. 브라우저는 이 정보와 기기의 실제 화면 폭·픽셀 밀도를 계산해서 srcset 목록 중 가장 알맞은 파일을 다운로드합니다.

픽셀 밀도 기술자(x) 방식

이미지가 항상 같은 표시 크기로 고정되어 있다면(예: 로고, 아바타) 더 단순한 x 방식을 씁니다.

이 방식은 일반 화면(1x)에는 기본 이미지를, 레티나 등 고밀도 화면(2x, 3x)에는 더 선명한 고해상도 이미지를 내려줍니다. 표시 크기는 고정이고 화질만 디바이스에 맞춰 바뀝니다.

언제 srcset이 진짜 필요할까

srcset은 분명 효과적인 기법이지만, 모든 이미지에 무조건 적용해야 하는 것은 아닙니다. 적용 여부는 이미지가 화면 크기에 따라 실제로 표시 크기가 크게 달라지는지에 달려 있습니다.

• srcset이 효과적인 경우 — 히어로 배너, 상세페이지 대형 사진처럼 모바일과 데스크톱에서 표시 크기 차이가 큰 이미지. 방문자가 많고 대역폭 절감 효과가 트래픽 규모만큼 커지는 미디어·쇼핑몰 사이트. 레티나 디스플레이 대응이 중요한 포트폴리오·사진 중심 사이트.
• 압축 하나로 충분한 경우가 많은 경우 — 애초에 표시 크기가 작고 고정적인 아이콘·썸네일. 이미지 개수가 적은 소규모 랜딩페이지나 블로그 — 여러 사이즈 파일을 만들고 관리하는 수고가 절감되는 용량보다 클 수 있습니다. 이미 충분히 작게 압축된 이미지 하나로 모바일·데스크톱 모두 무리 없는 용량이 나오는 경우.

압축과 srcset은 서로 다른 축입니다

구분	이미지 압축	srcset / sizes
줄이는 것	파일 하나의 바이트 용량	불필요하게 큰 이미지를 받는 상황 자체
적용 대상	모든 이미지에 기본으로 적용	화면별 표시 크기 차이가 큰 이미지에 선택 적용
준비물	파일 1개	같은 이미지의 여러 크기 버전

실무에서는 둘을 함께 쓰는 것이 가장 효과적입니다. srcset에 들어갈 각 사이즈별 파일도 결국 압축이 안 되어 있으면 무의미하게 무거워지기 때문에, "여러 크기로 나누기 전에 각 파일부터 압축한다"는 순서가 이상적입니다.