srcset을 넣었는데 브라우저가 계속 큰 이미지만 받아간 이유

문제 발생

모바일 트래픽을 줄이려고 srcset에 여러 크기를 넣었는데, 개발자 도구로 보니 휴대폰에서도 800w 이미지를 받고 있었습니다.

<img srcset="thumb-480.jpg 480w, thumb-800.jpg 800w" src="thumb-800.jpg" alt="" />

원인 분석

w 서술자는 각 파일의 실제 가로 픽셀 수를 알려 줄 뿐입니다. 브라우저가 고르려면 하나가 더 필요합니다 — 이 이미지가 화면에서 몇 px로 표시될 것인가. 그 정보를 주는 것이 sizes입니다.

문제는 시점입니다. 브라우저는 CSS를 파싱하기 전에 이미지 요청을 시작합니다(프리로드 스캐너). 그러니 CSS에 width: 100%라고 써 두었어도 그 시점에는 알 수 없습니다. sizes가 없으면 표시 폭을 100vw로 가정하고, 결과적으로 큰 후보를 고르게 됩니다.

x 서술자는 다른 문제를 풉니다. 표시 크기는 같고 화면 밀도만 다른 경우입니다. 이때는 표시 폭이 CSS로 고정돼 있으므로 sizes가 필요 없습니다.

해결 방안

1. w를 쓰면 sizes를 함께 적습니다. 레이아웃에서 이 이미지가 차지하는 폭을 미디어 조건으로 서술합니다.

<img
  srcset="thumb-480.jpg 480w, thumb-800.jpg 800w, thumb-1200.jpg 1200w"
  sizes="(width <= 600px) 100vw, (width <= 1200px) 50vw, 400px"
  src="thumb-800.jpg"
  alt="" />

2. 고정 크기 아이콘·아바타는 x를 씁니다. 훨씬 간단합니다.

<img src="avatar.png" srcset="[email protected] 2x, [email protected] 3x" width="40" height="40" alt="" />

3. 크롭이 달라져야 하면 <picture>를 씁니다. 같은 사진의 크기 차이가 아니라 다른 이미지를 보여 주는 경우입니다 — 데스크톱은 가로 풍경, 모바일은 인물 클로즈업처럼요. 이건 해상도 전환이 아니라 아트 디렉션입니다.

<picture>
  <source media="(width < 800px)" srcset="hero-portrait.jpg" />
  <img src="hero-landscape.jpg" alt="" />
</picture>

4. 포맷 협상도 <picture>로 합니다. 브라우저가 지원하는 첫 <source>를 고르므로, AVIF·WebP를 앞에 두고 JPEG를 <img>에 남깁니다.

<picture>
  <source type="image/avif" srcset="photo.avif" />
  <source type="image/webp" srcset="photo.webp" />
  <img src="photo.jpg" alt="" />
</picture>

5. sizes는 레이아웃과 함께 관리합니다. CSS를 고쳐 이미지 폭이 바뀌었는데 sizes가 그대로면 다시 어긋납니다. 정확하지 않아도 되지만 실제보다 크게 잡는 편이 흐릿한 이미지보다 낫습니다.

공식 문서

• MDN: 반응형 이미지
• MDN: <img> — srcset과 sizes
• MDN: <picture>