"브라우저의 해상도, 지원 환경에 따른 반응형 이미지는 그간 CSS와 JavaScript를 통해 지원되어 왔습니다. 크롬 브라우저 38버전부터 새로운 <picture> 엘리먼트를 통해 이를 CSS나 JavaScript의 도움 없이 구현할 수 있는 방법이 제공됩니다. 이러한 의존성으로부터 화면의 스타일과 이미지 콘텐츠를 분리함으로써 다양한 환경에 반응하는 이미지 리소스를 자연스럽게 HTML 마크업에 포함시킬 수 있게 되었습니다. 이는 콘텐츠에 집중하도록 설계된 HTML의 개념이나 접근성에 있어서도 매우 중요한 한걸음입니다."
p.s. 이미 한달 전에 Live한 글입니다만, WebFundamentals 번역과 더불어 일신 상의 변화로 인해 정말 오랜만에 업데이트 소식을 올립니다. :)
TL;DR;
<picture> 엘리먼트는 이미지 리소스 로딩에 대한 선언적 형태의 접근을 제공합니다. 웹 개발자들은 더 이상 반응형 디자인에서 이미지를 제어하기 위해 CSS나 자바스크립트 핵(Hack)들을 필요로 하지 않을 것입니다.
네이티브 수준에서 최적화된 이미지 리소스의 활용은 로딩이 느린 모바일 상에서 더 중요할 것이며, <img>과 <picture> 엘리먼트에 새로 추가된 srcset와 sizes 속성은 이미지 리소스에 한해 웹 개발자들에게 보다 많은 유연성을 제공합니다.
이 튜토리얼에서는 깔끔한 HTML 마크업을 작성하고 반응형 디자인과 웹 페이지의 로딩 시간 개선을 위해 브라우저가 다음 중의 아무 시나리오 한가지 혹은 복합적인 형태로 검출하는 동작을 수행하는 방법을 알아봅니다.
> 이미지 로딩 기준의 다양화
이제 여러분이 원하는 다양한 인자를 기준으로 이미지가 로딩되도록 할 수 있습니다. 예를 들어 다음과 같은 기준을 기반으로 이미지가 반응형으로 로딩되도록 할 수 있습니다.- 아트 디렉션(Art direction) 기반
- 현재 스크린 오리엔테이션이나 해상도에 최적화된 이미지를 로드할 경우
- 디바이스 픽셀 비율(Device Pixel Ratio) 기반
- 화면의 DPI에 최적화된 이미지들을 로드할 경우
- 뷰포트(Viewport) 기반
- 뷰포트의 크기에 대해 반응형으로 이미지를 로드할 경우
- 이미지 포맷(Image format) 기반
- 브라우저의 지원 포맷에 따른 이미지를 로드할 경우(e.g. WebP)
브라우저 뷰포트 크기에 대해 반응하는 이미지 로딩 |
> <source> 엘리먼트들과 함께 사용하기
<picture> 엘리먼트가 제대로 동작하기 위해서는 새로운 속성들이 추가된 <source>의 사용이 필수적입니다. 브라우저는 가장 적합한 이미지 리소스를 로딩하기 위해 속성값을 순서에 따라 힌트로 사용합니다. <source>에는 다음과 같은 새로운 속성을 사용할 수 있습니다.
- srcset (필수)
- srcset="kitten.png"와 같이 하나의 이미지 파일 경로
- srcset="kitten.png, kitten@2X.png 2x"와 같은 픽셀 밀도 기술(Pixel density descriptor)들과 함께 콤마(,)로 구분되는 이미지 파일 경로들의 리스트
- 기술되지 않았을 경우 1x로 가정됩니다.
- media (선택)
- CSS @media 셀렉터에서 일반적으로 확인할 수 있는 모든 유효한 미디어쿼리를 받습니다.
- e.g. media="(max-width: 30em)"
- sizes (선택)
- 너비(width) 서술자
- sizes="100vw"
- 너비(width)를 갖는 미디어쿼리
- sizes="(max-width: 30em) 100vw"
- 리스트의 마지막 아이템에 콤마(,)로 구분되는 width 미디어쿼리의 리스트
- e.g. sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
- type (선택)
- 지원 MIME 타입
- e.g. type="image/webp" 혹은 type="image/vnd.ms-photo"
> <picture> 엘리먼트를 지원하지 않는 브라우저를 위한 <img> 사용
브라우저가 picture 엘리먼트를 지원하지 않거나 맞는 source 엘리먼트 태그가 없을 경우 <img> 엘리먼트는 <picture> 내에서 대체 방법으로써 사용할 수 있습니다. 즉, 매칭되는 <source>가 없을 때 <img>도 없을 경우 아무런 이미지도 로딩되지 않습니다.
- <img>이 마지막 아이템으로 기술되어야 최종적인 선택지로 동작한다는 점에 주의
> 픽셀 밀도 서술자(Pixel density descriptor)
1x, 1.5x, 2x 그리고 3x와 같은 픽셀 밀도 서술자(Pixel density descriptor)들을 사용하여 고해상도 디스플레이 지원을 추가합니다. 새로 추가된 srcset 속성은 <img>와 <source> 엘리먼트 모두에 적용됩니다.
> 대체 이미지 파일 포맷들의 로딩
<source>의 type 속성은 모든 브라우저에서 아마 지원하지 않는 대체 이미지 파일 포맷들을 로딩하는데 사용될 수 있습니다. 예를 들어, 브라우저가 WebP 포맷를 지원한다면 다른 브라우저에서는 JPEG로 처리되는데 반해 다음과 같이 WebP 포맷의 이미지를 제공할 수 있습니다.
자세한 내용은 튜토리얼을 참조하시기 바랍니다.
번역 링크
- 브라우저 내장 반응형 이미지