상품 카드가 모바일에서는 한 줄에 하나, 데스크톱에서는 두 개씩 놓인다고 해보자. 이미지는 카드 너비에 맞춰 줄어드는데, 브라우저가 내려받는 파일까지 적절한 크기인지는 별개의 문제다.
srcset에 여러 크기의 이미지를 준비해도 sizes가 실제 레이아웃과 맞지 않으면 브라우저는 필요 이상으로 큰 파일을 고를 수 있다. 화면 크기마다 카드 너비를 다시 적어두는 일이 번거로웠던 이유다.
2026년 9월 Safari 27이 지연 로딩 이미지의 sizes="auto"를 지원하면서, 이 방식은 주요 브라우저 최신 버전에서 사용할 수 있게 됐다. 다만 모든 이미지에 적용하는 새 기본값은 아니다. 처음 화면에 보이지 않아 지연 로딩하는 이미지에 적합한 기능이다. web.dev의 브라우저 지원 안내
srcset만으로는 부족한 이유
다음 코드는 같은 사진을 세 가지 너비로 제공한다.
1 2 3 4 5 6 7 8 9<img src="/images/product-800.webp" srcset=" /images/product-400.webp 400w, /images/product-800.webp 800w, /images/product-1200.webp 1200w " alt="제품의 앞면" />
브라우저는 후보 파일의 너비를 알지만, 이 이미지가 화면에서 얼마나 넓게 표시될지는 srcset만 보고 정확히 알 수 없다. sizes를 생략하면 이미지가 화면 너비 전체를 차지한다고 가정할 수 있어, 실제로는 작은 카드에 들어가는 사진인데도 큰 파일을 선택할 여지가 있다. MDN의 <img> 설명
기존에는 레이아웃을 sizes에도 다시 표현했다.
1sizes="(max-width: 48rem) 100vw, 50vw"
이미지가 모바일에서 화면 너비 정도, 더 넓은 화면에서 절반 정도를 차지한다는 힌트다. 문제는 카드의 최대 너비나 그리드 열 수가 바뀌면 이 값도 함께 점검해야 한다는 것이다. CSS의 배치 규칙과 HTML의 이미지 선택 규칙을 따로 관리하게 된다.
지연 로딩 이미지라면 실제 배치 너비를 사용할 수 있다
loading="lazy"인 이미지에서는 sizes의 첫 값으로 auto를 쓸 수 있다. 브라우저가 레이아웃을 계산한 뒤 이미지가 차지할 너비를 이미지 선택에 활용하는 방식이다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14<img class="product-image" src="/images/product-800.webp" srcset=" /images/product-400.webp 400w, /images/product-800.webp 800w, /images/product-1200.webp 1200w " sizes="auto, (max-width: 48rem) 100vw, 50vw" width="1200" height="900" loading="lazy" alt="제품의 앞면" />
앞의 auto가 적용되면 뒤에 적은 화면별 값은 사용하지 않는다. 뒤의 값은 auto를 지원하지 않거나 이미지의 배치 너비를 결정할 수 없는 경우를 위한 대체 힌트다. width와 height는 사진의 비율에 맞는 공간을 미리 확보하는 데에도 필요하다. MDN의 sizes 사용법
여기서 auto가 “항상 가장 작은 파일을 받는다”는 뜻은 아니다. 브라우저는 표시 너비뿐 아니라 기기의 픽셀 밀도도 고려한다. 카드가 CSS상 360px 너비로 보이더라도 고밀도 화면에서는 그보다 넓은 원본이 적합할 수 있다. 실제로 어떤 파일을 골랐는지는 브라우저와 환경에 따라 확인해야 한다. MDN의 이미지 후보 선택 설명
대표 이미지에는 적용하지 않는다
이 기능의 가장 중요한 조건은 loading="lazy"다. 따라서 글의 대표 이미지나 첫 화면에서 가장 크게 보이는 이미지를 sizes="auto"에 맞추려고 지연 로딩으로 바꾸면 순서가 뒤집힌다.
첫 화면의 중요한 이미지는 가능한 한 일찍 발견하고 내려받아야 한다. 특히 LCP 대상이 될 가능성이 있는 이미지에 loading="lazy"를 붙이면 요청 시작이 늦어질 수 있다. 이 경우에는 기존처럼 레이아웃에 맞는 sizes 값을 명시하는 편이 낫다. web.dev의 LCP 최적화 안내
적용 대상을 나누면 간단하다.
- 첫 화면의 대표 이미지: 지연 로딩하지 않고,
sizes를 명시해 조기에 내려받도록 한다. - 아래로 스크롤해야 보이는 카드·목록 이미지:
loading="lazy"와sizes="auto"를 검토한다.
적용 전후에 확인할 것
우선 이미지가 표시될 너비를 CSS에서 안정적으로 결정할 수 있어야 한다. 레이아웃 너비가 아직 정해지지 않았다면 auto가 기대한 대로 작동하지 않고 대체 값으로 넘어갈 수 있다.
적용 후에는 개발자 도구의 네트워크 패널에서 실제로 요청한 이미지 파일을 확인해보자. 모바일과 데스크톱, 일반 화면과 고밀도 화면을 각각 살펴보면 된다. 단순히 이미지가 선명해 보이는지만 확인해서는 과도하게 큰 파일을 받고 있는지 알기 어렵다.
또한 sizes="auto"는 이미지 압축이나 파일 형식을 최적화해주지 않는다. 적절한 크기의 후보 파일을 만들어 srcset에 제공하는 일은 여전히 개발자의 몫이다.
반응형 이미지 최적화에는 두 질문이 있다. 언제 받을 것인가, 그리고 어느 크기를 받을 것인가. loading="lazy"가 첫 번째를, srcset과 sizes가 두 번째를 다룬다. sizes="auto"는 그중 일부 이미지에서 레이아웃 너비를 중복해서 적어야 하는 부담을 줄여준다. 작지만, 이미지가 많은 목록 화면에서는 점검해볼 만한 변화다.