반응형 이미지 sizes="auto", CSS와 중복된 너비 계산 줄이기

세 줄 요약

sizes="auto"는 loading="lazy" 이미지의 실제 배치 너비로 srcset 후보를 선택하게 한다.
이미지와 컨테이너의 CSS 크기는 계속 정해야 하며, auto 뒤에는 구형 브라우저용 sizes 목록을 둘 수 있다.
즉시 로딩할 이미지를 auto 때문에 lazy로 바꾸지 않는다. 선택한 파일은 currentSrc로 따로 확인한다.

지연 로딩 이미지라면 sizes의 레이아웃 계산을 줄일 수 있다

카드의 폭은 CSS로 정했는데, 같은 조건을 HTML의 sizes에도 다시 적고 있었다면 loading="lazy"와 sizes="auto" 조합을 쓸 수 있다. 브라우저가 배치된 이미지의 너비를 바탕으로 srcset에서 내려받을 후보를 고른다. Safari 27도 이 기능을 지원하기 시작했다.

예를 들어 목록의 열 수가 바뀔 때 CSS와 sizes의 조건을 따로 관리하면 한쪽 수정이 빠지기 쉽다. auto는 지연 로딩 시점에 알 수 있는 배치 너비를 사용하므로 이중 계산을 줄인다. MDN이 설명하는 적용 조건도 loading="lazy"다.

다만 auto가 이미지를 모바일 화면 안에 맞춰 배치해 주는 것은 아니다. 이미지가 놓일 폭과 비율을 정하는 작업은 여전히 HTML과 CSS에 남는다. 자동으로 바뀌는 것은 그 배치를 이용한 파일 선택이다.

이미지 후보·표시 폭·대체 sizes를 함께 둔다

다음은 폭이 최대 600px이며 좁은 화면에서는 뷰포트 폭까지 줄어드는 카드의 예다. 세 파일은 각각 400·800·1200픽셀 너비이고 같은 비율이라는 조건이다. 실제 페이지에 좌우 여백이 있다면 CSS와 대체 sizes도 그만큼 반영해야 한다.

<div class="photo-card">
  <img
    src="photo-800.jpg"
    srcset="photo-400.jpg 400w,
            photo-800.jpg 800w,
            photo-1200.jpg 1200w"
    sizes="auto, (max-width: 600px) 100vw, 600px"
    loading="lazy"
    width="1200"
    height="800"
    alt="산책로 옆의 나무">
</div>

/* CSS */
.photo-card {
  width: min(100%, 600px);
}
.photo-card img {
  display: block;
  width: 100%;
  height: auto;
}

HTML 표준의 이미지 예제처럼 auto를 첫 항목으로 놓고 그 뒤에 일반 sizes를 붙이면, auto 미지원 브라우저가 후속 값을 사용할 수 있다. width와 height는 파일 비율에 맞게 두고 CSS로 표시 폭을 정한다. 파일명의 숫자만 바꾸는 것이 아니라 srcset의 w 값과 실제 파일 폭이 일치해야 한다.

역할은 세 가지다. srcset은 후보 파일을 제공하고, CSS는 화면 배치를 정하며, sizes는 파일 선택에 사용할 폭을 알려 준다. auto를 넣어도 후보 이미지 파일이 새로 만들어지는 것은 아니다.

첫 화면의 주요 이미지는 기존 sizes를 유지한다

auto를 쓰기 위해 즉시 보여야 할 이미지를 lazy로 바꾸면 안 된다. Shopify의 공식 반응형 이미지 안내도 eager 이미지와 LCP 이미지에는 명시적인 sizes가 필요하다고 설명한다. 브라우저가 배치 계산 전에 파일을 선택해야 하기 때문이다.

이미지 상황	sizes 선택
첫 화면 아래의 목록 이미지를 지연 로딩한다.	auto를 사용하고 필요한 대체 목록을 덧붙인다.
첫 화면에서 즉시 로딩해야 한다.	실제 배치에 맞는 명시적 sizes를 유지한다.
컨테이너 밖으로 넘치거나 비율이 틀어진다.	CSS 너비·높이와 HTML 치수부터 점검한다.

WordPress에서는 이미 6.7 도입 당시부터 lazy 이미지에 auto를 앞에 붙이는 방식을 채택했다. 테마나 플러그인이 최종 HTML의 loading 값을 바꾼다면 sizes와의 조합도 함께 봐야 한다. CMS 설정 화면의 값보다 브라우저가 받은 마크업이 점검 대상이다.

화면의 폭과 브라우저가 선택한 파일을 나눠 확인한다

이미지 크기가 예상과 다르면 먼저 개발자도구에서 해당 이미지와 컨테이너의 표시 폭을 본다. 그다음 currentSrc로 선택된 URL을 확인한다. 다음 식은 예제 카드의 첫 이미지를 대상으로 한다.

document.querySelector(".photo-card img").currentSrc

currentSrc는 선택한 파일을 알려 주며 다운로드 성공을 보증하지 않는다. 요청이 끝났는지는 Network에서 별도로 확인해야 한다. 화면의 폭이 잘못됐다면 레이아웃을 고치고, 폭은 맞는데 후보가 이상하다면 최종 srcset·sizes·loading 조합을 살펴본다.

도입 순서는 지연 로딩 목록부터가 적합하다. CSS를 유지한 채 auto와 대체 sizes를 적용하고, 지원 브라우저와 구형 브라우저에서 선택 URL을 비교한다. 첫 화면의 주요 이미지까지 일괄 변환할 이유는 없다.