반응형 이미지 크기 설정 완벽 가이드 - srcset부터 picture 요소까지

같은 이미지를 올렸는데 모바일에서는 글자가 뭉개지고, 데스크톱에서는 페이지 로딩이 답답하게 느린 경험이 있으실 겁니다. 원인은 대부분 하나입니다. 모든 화면에 똑같은 크기의 이미지 한 장을 던져주기 때문입니다. 반응형 이미지 크기 설정은 화면 너비와 해상도에 맞춰 적절한 이미지를 골라 보내주는 기술입니다. 제대로 적용하면 화질은 유지하면서 모바일 데이터 사용량을 절반 이하로 줄일 수 있습니다.

반응형 이미지가 필요한 이유

2026년 기준 국내 웹 트래픽의 70퍼센트 이상이 모바일에서 발생합니다. 그런데 많은 사이트가 데스크톱 기준으로 만든 1920px 너비 이미지를 모바일에도 그대로 내려보냅니다. 가로 360px짜리 화면에 1920px 이미지를 넣으면 어떻게 될까요. 사용자는 보이지도 않는 픽셀을 위해 수백 킬로바이트를 다운로드합니다.

반대 경우도 문제입니다. 모바일 기준으로 작게 만든 이미지를 고해상도 데스크톱이나 레티나 디스플레이에 띄우면 흐릿하게 늘어납니다. 핵심은 화면마다 다른 크기의 이미지를 준비하고, 브라우저가 알아서 고르게 만드는 것입니다.

이미지 한 장을 모든 화면에 쓰는 것은 한 켤레의 신발로 온 가족이 신으려는 것과 같습니다. 누군가에게는 크고 누군가에게는 작습니다.

srcset과 sizes 속성 이해하기

반응형 이미지의 기본은 img 태그의 srcset과 sizes 속성입니다. 이 둘은 역할이 다릅니다.

• srcset: 사용할 수 있는 이미지 후보들과 각각의 실제 너비를 알려줍니다.
• sizes: 화면 조건별로 이미지가 실제로 차지할 표시 너비를 알려줍니다.

예를 들어 다음 코드를 봅시다.

<img src="photo-800.jpg" srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w" sizes="(max-width: 600px) 100vw, 50vw" alt="설명">

이 설정은 화면 너비가 600px 이하면 이미지가 화면 전체 너비를 차지하고, 그보다 크면 화면의 절반을 차지한다는 뜻입니다. 브라우저는 현재 화면 크기와 픽셀 밀도를 계산해서 srcset 후보 중 가장 적합한 한 장을 알아서 내려받습니다.

화면 크기별 이미지 크기 설정 기준

이미지를 몇 가지 크기로 준비해야 할지 막막하다면 아래 기준을 출발점으로 삼으시면 됩니다. 실무에서 가장 자주 쓰이는 구간입니다.

레티나 같은 고밀도 화면은 같은 표시 크기라도 2배 픽셀이 필요합니다. 화면에서 800px로 보일 이미지라도 선명하게 하려면 1600px 원본을 준비해두는 것이 좋습니다. 모든 구간을 다 만들 필요는 없습니다. 일반적으로 3단계(소/중/대)면 대부분의 상황을 충분히 덮습니다.

picture 요소로 상황별 이미지 교체

srcset이 같은 이미지의 크기만 바꾸는 거라면, picture 요소는 화면 조건에 따라 완전히 다른 이미지나 포맷을 보여줄 때 씁니다. 이를 아트 디렉션이라고 합니다.

대표적인 활용 두 가지입니다.

• 구도 변경: 데스크톱에서는 와이드한 가로 사진을, 모바일에서는 인물 중심으로 잘라낸 세로 사진을 보여줍니다.
• 포맷 분기: WebP나 AVIF를 먼저 시도하고, 지원하지 않는 브라우저에는 JPG를 내려줍니다.

AVIF와 WebP는 같은 화질에서 JPG보다 30~50퍼센트 가벼운 경우가 많아, 포맷 분기만 적용해도 체감 속도가 달라집니다. picture 안에 source 여러 개를 두고 마지막에 기본 img를 넣으면, 브라우저가 위에서부터 조건을 검사해 가장 먼저 맞는 것을 사용합니다.

이미지 최적화와 캐시 관리

크기를 잘 나눠도 캐시 설정이 어긋나면 효과가 반감됩니다. 이미지는 자주 바뀌지 않으므로 캐시 기간을 길게 잡는 것이 정석입니다. 다만 길게 잡으면 이미지를 교체했을 때 사용자 브라우저에 옛 버전이 남는 문제가 생깁니다.

이때 쓰는 방법이 캐시 버스팅입니다. 파일 내용이 바뀔 때마다 파일명이나 URL에 고유한 문자열을 붙여, 브라우저가 새 파일로 인식하게 만드는 기법입니다. 보통 파일 내용을 기반으로 만든 해시값을 파일명에 넣습니다. 예를 들어 photo.abc123.jpg 형태입니다. 빌드 도구가 자동으로 처리해주지만, 수동으로 짧은 해시 문자열이 필요할 때는 해시 생성기 같은 도구로 빠르게 값을 뽑아 쓸 수 있습니다.

추가로 챙기면 좋은 항목들입니다.

• loading="lazy": 화면 밖 이미지는 스크롤이 닿을 때 불러와 초기 로딩을 가볍게 합니다.
• width와 height 명시: 로딩 중 레이아웃이 튀는 현상(CLS)을 막아줍니다.
• fetchpriority="high": 첫 화면의 대표 이미지에 우선순위를 줘 빠르게 표시합니다.

실전 적용 체크리스트

오늘 바로 점검할 수 있는 항목으로 정리했습니다. 한 줄씩 확인하시면 됩니다.

• 본문 이미지에 srcset과 sizes를 함께 적용했는가
• 최소 3단계(모바일/태블릿/데스크톱) 크기를 준비했는가
• 고해상도 화면을 위해 2배 크기 원본을 갖췄는가
• WebP 또는 AVIF 포맷을 제공하는가
• 모든 이미지에 width와 height를 지정했는가
• 캐시 버스팅으로 이미지 교체가 즉시 반영되는가

먼저 트래픽이 가장 많은 페이지의 대표 이미지부터 srcset을 적용해 보세요. 그다음 이미지 포맷을 WebP로 바꾸면 두 가지 작업만으로도 모바일 로딩 속도가 눈에 띄게 빨라집니다. 측정 도구로 적용 전후를 비교해 보면 차이를 숫자로 확인하실 수 있습니다.