반응형 이미지 srcset은 같은 사진을 여러 크기로 준비해 두고, 화면 폭과 해상도에 맞는 파일 하나만 내려받게 하는 HTML 속성입니다. 폰으로 들어온 방문자에게 1920px짜리 메인 사진을 그대로 보내는 일을 막아 주기 때문에, 이미지가 많은 홈페이지일수록 모바일 로딩이 눈에 띄게 가벼워집니다.
여기서는 실무에서 가장 많이 틀리는 sizes 값을 중심으로 정리했습니다.

1. srcset에 폭(w)을 적고, 화면에 보일 크기를 sizes로 알려주기

600w는 "이 파일의 실제 가로 픽셀이 600"이라는 뜻입니다. 브라우저는 sizes로 이미지가 화면에서 차지할 폭을 계산하고, 기기의 픽셀 밀도까지 곱해서 가장 알맞은 파일을 고릅니다. src는 srcset을 모르는 오래된 브라우저용 기본값입니다.

<!-- 같은 사진을 폭별로 3장 준비 -->
<img
  src="/img/main-1200.jpg"
  srcset="/img/main-600.jpg 600w,
          /img/main-1200.jpg 1200w,
          /img/main-1920.jpg 1920w"
  sizes="100vw"
  width="1920" height="1080"
  alt="나눔웹 사무실 회의 모습">

width와 height는 화면 크기가 아니라 비율 정보로 쓰입니다. 넣어 두면 사진이 뜨기 전에 자리가 잡혀서 화면이 덜컹거리지 않습니다.

2. 가장 흔한 실수, sizes를 빼먹는 경우

sizes를 생략하면 브라우저는 이미지가 화면 전체 폭(100vw)을 차지한다고 가정합니다. 그래서 PC에서 3열 카드로 작게 보이는 썸네일도 큰 파일을 받아 갑니다. 카드나 목록 이미지는 아래처럼 레이아웃에 맞춰 적어 주세요.

<!-- PC에선 3열(약 33%), 모바일에선 거의 전체 폭 -->
<img
  src="/img/card-800.jpg"
  srcset="/img/card-400.jpg 400w,
          /img/card-800.jpg 800w"
  sizes="(max-width: 767px) 92vw, 380px"
  width="800" height="600"
  loading="lazy"
  alt="리뉴얼 포트폴리오 썸네일">

조건은 앞에서부터 확인하고 처음 맞는 값을 씁니다. 마지막 값은 조건 없이 기본값으로 둡니다. 숫자가 픽셀 단위로 정확할 필요는 없고, 실제 표시 폭과 비슷하면 충분합니다.

3. 크기가 고정된 로고는 1x, 2x로

로고나 아이콘처럼 어느 화면에서나 같은 크기로 보이는 이미지는 폭 대신 밀도로 적는 편이 간단합니다. 레티나 화면에서는 2배 파일, 일반 모니터에서는 1배 파일을 받습니다.

<!-- 로고처럼 표시 크기가 고정이면 x 표기 -->
<img src="/img/logo.png"
     srcset="/img/logo.png 1x, /img/logo@2x.png 2x"
     width="160" height="40" alt="나눔웹">

확인은 크롬 개발자 도구 Network 탭에서 Img 필터를 걸고 모바일 모드로 새로고침하면 됩니다. 이때 한 가지 주의할 점은, 브라우저가 이미 큰 파일을 캐시에 갖고 있으면 작은 화면에서도 그 파일을 재사용할 수 있다는 것입니다. 테스트할 때는 캐시를 비우고 보세요.