반응형 이미지 심화 (<picture>와 srcset)
모바일 기기로 접속한 사용자에게 PC용 4K 초고화질 이미지를 보내는 건 요금제 데이터 낭비이자 로딩 속도의 적입니다. HTML에서는 디스플레이의 크기나 화질(픽셀 밀도)에 맞춰 브라우저가 스스로 가장 적합한 이미지를 골라오게끔 할 수 있습니다.
👗 입는 사람 체격에 맞춰 알아서 변하는 마법의 옷
개발자가 모바일용, 태블릿용, PC용 이미지를 모두 준비해 던져주면, 스마트폰 브라우저는 자신의 화면 크기에 맞는 옷(이미지) 하나만 쏙 골라 입습니다. 특히 <picture> 태그는 PC에서는 가로로 긴 배너를 보여주다가 모바일에서는 글자가 잘 보이게 정사각형 배너로 아예 이미지를 교체해버릴 때(아트 디렉션) 최고의 능력을 발휘합니다.
| 태그 및 속성 | 설명 |
|---|---|
srcset="..." | 하나의 img 태그 안에서 1x(일반 모니터), 2x(레티나/아이폰 고화질) 등 여러 후보 이미지를 제공합니다. |
<picture> | 다양한 크기/비율의 여러 이미지를 감싸는 최상위 컨테이너 태그입니다. |
<source> | picture 태그 내부에서 media="(min-width: 800px)" 조건에 따라 언제 이 이미지를 쓸지 지정합니다. |
<!-- 1. 같은 비율의 이미지 해상도(화질)만 기기별로 다르게 줄 때 -->
<img src="https://picsum.photos/id/237/200/200"
srcset="https://picsum.photos/id/237/200/200 1x,
https://picsum.photos/id/237/400/400 2x"
alt="귀여운 강아지">
<!-- 레티나(고화질) 디스플레이에서는 알아서 2x 이미지를 가져옵니다 -->
<br><br>
<!-- 2. 기기 크기에 따라 이미지 비율이나 모양 자체가 아예 달라져야 할 때 (Art Direction) -->
<picture>
<!-- 화면이 넓을 때 (PC) -->
<source media="(min-width: 1024px)" srcset="https://picsum.photos/id/10/1024/300">
<!-- 화면이 중간일 때 (Tablet) -->
<source media="(min-width: 768px)" srcset="https://picsum.photos/id/10/768/400">
<!-- 기본값 (Mobile) -->
<img src="https://picsum.photos/id/10/400/400" alt="풍경 배너" style="max-width: 100%; height: auto;">
</picture>
<p><strong>브라우저 창 크기를 조절해보세요!</strong> 강아지 사진은 화질만 변하지만, 아래 풍경 사진은 화면 넓이에 따라 가로세로 비율(크롭 영역) 자체가 완전히 달라집니다.</p>