1. 개요
웹 페이지를 탐색하는 기기가 다양해지면서 화면 비율 또한 다양해졌다.
이에 반응형 레이아웃에 맞춰 적절한 크기의 이미지를 제공해야 할 필요성이 생겼다.
예를 들어 모바일 환경과 같은 작은 크기를 가진 기기에 고해상도 이미지를 제공한다 했을 때,
그 고해상도 이미지가 필요한 예외적인 상황이 아닐 경우 불필요한 대역폭 낭비를 초래하고 로딩 속도에 악역향을 미치게 된다.
여기서는 반응형 레이아웃이 아닌, 반응형 이미지에 대해 설명한다.
2. 반응형 이미지 구현법
2.1. 해상도 전환
현재 뷰포트의 너비에 맞게 적절한 해상도의 이미지를 제공하는 방법이다.
<!-- HTML 기준 -->
<img
srcset="elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w" <!-- px이 아닌 w에 유의 -->
sizes="(max-width: 600px) 480px, 800px" <!-- 뷰포트 너비가 600px 이하일 때 -->
src="elva-fairy-800w.jpg"
alt="요정 옷을 입은 엘바"
/>
<!--
브라우저는 다음과 같은 동작을 따른다.
1. 기기 너비 확인
2. sizes 목록에서 어떤 미디어 조건이 가장 먼저 참인지 탐색
3. 해당 미디어 쿼리에 지정된 슬롯 크기 확인
4. 슬롯 크기와 장치 픽셀 비율(DPR)을 곱하여 필요한 최적의 이미지 소스 크기를 계산(Gemini 보충)
5. srcset 목록에서 해당 크기에 가장 가까운 w값을 가진 소스를 선택해 로드
* 콘솔에서 document.querySelector('html').clientWidth를 입력하면 현재 뷰포트 너비를 알 수 있다.
-->srcset은 브라우저에서 선택할 수 있는 이미지 세트와 각 이미지의 크기를 정의한다. 각 이미지 정보 세트는 쉼표로 이전 이미지와 구분한다.
픽셀 단위가 아닌 w를 사용하는데, 이미지의 고유 크기를 사용하기 때문이다.
sizes는 일련의 미디어 조건(ex: 화면 너비)을 정의하고 그에 따라 적절한 이미지를 알려준다. 괄호 안에 조건을 설정할 수 있다.
백분율은 제공하지 않는다. 또한 일치하는 첫 번째 조건 이후의 모든 것을 무시하므로 조건 순서에 유의해야 한다.
*모든 사람이 화면에서 동일한 실제 크기로 이미지를 보는 경우(srcset으로 만족스럽게 동작하는 경우) sizes는 안 써도 된다.
2.2. 아트 디렉션
데스크탑에서는 16:9 비율의 원본 이미지를 제공하고, 모바일에서는 세로형 레이아웃에 적합한 가공된 이미지를 제공하는 방법이다.
<picture> 요소를 이용한다.
<picture>
<source
media="(max-width: 799px)" <!-- 799px 이하면 이것 -->
srcset="elva-480w-close-portrait.jpg"
/>
<source
media="(min-width: 800px)" <!-- 800px 이상이면 이것 -->
srcset="elva-800w.jpg"
/>
<img src="elva-800w.jpg" alt="딸 엘바를 안고 서 있는 크리스" /> <!-- 기본 제공 -->
</picture><source> 요소에는 미디어 조건이 포함된 media 속성이 포함되어 있다. 표시할 이미지를 결정하는 조건이다.
닫는 태그 바로 전에 <img> 요소를 반드시 제공해야 하며, 그렇지 않으면 이미지가 표시되지 않으니 유의한다.
<picture>을 제공하지 않는 브라우저를 위한 기본값 역할도 한다.
2.3. <img>와 <picture>의 차이
<img>는 html에서 하나의 이미지 파일을 보여주는 요소이다.
<picture>은 다양한 조건(해상도, 화면 크기, 파일 형식)에 맞춰 여러 이미지 소스 중 가장 적합한 것을 선택해 제공하는 요소이다.