사용하는 기기의 화면 크기, 해상도 등에 따라 웹사이트는 다양한 뷰포트 사이즈에서 작동하게 된다
다양한 화면 크기는 다양한 레이아웃을 만들게 되고, 이는 화면이 줄어듬에 따라 이미지의 양 옆을 자른다거나, 너무나 축소하여 내용을 파악하기 힘든 상황을 연출할 수 있다.
이러한 레이아웃에 대해 서로 다른 자른 이미지를 제공하는 현상을 아트 디렉션 문제(art direction problem) 라고 한다.
이러한 현상은 아래의 두 가지 속성 srcset와 sizes를 활용하면 해결할 수 있다.
💻 srcset
정해진 사이즈마다 이미지의 종류를 선택하여 지정한다.
<img
src="images/large.png"
srset="images/small.png 300w,
images/mideum.png 450w,
images/large.png 600w"
alt="responsive images"
/>우선, srcset 을 지원하지 않는 브라우저를 고려하여 기본 src 주소를 입력한다. 그 후 너비에 맞춰서 순서대로 이미지 주소를 입력해주고, 대체 테스트를 적는다.
이때 반응형 이미지 샘플은 아래 링크를 통해 만들 수 있는데, 뒤에 너비를 입력하면 자동으로 만들어진다.
https://via.placeholder.com/600 → 가로세로 600
https://via.placeholder.com/300x500 → 가로 300 세로 500
💻 sizes
min-width 혹은 max-width를 정하여 마크업한다.
<img
src="images/large.png"
srset="images/small.png 300w,
images/mideum.png 450w,
images/large.png 600w"
sizes="(min-width: 600px) 600px,
(min-width: 450px) 450px,
300px"
alt="responsive images"
/>위와 같이 마크업했을 경우, 최소 넓이가 600일때까지 이미지의 넓이는 600으로 유지될 것이고, 그 다음으로 450이 될때까지 450으로 유지, 마지막으로 300으로 계속 유지될 것이다. 따라서 넓이가 아무리 넓어져도 600 이상으로 이미지의 가로 사이즈가 넓어지지 않는다.
