이미지 반응형을 어떻게하면 좀 더 좋아질까 검색하던 중에 <img>
태그에서 srcset
, sizes
를 이용하면 반응형에 좋다는 글이 있어서 공부했다.
<img>
태그에서 src
를 이용해 이미지를 불러왔다면 srcset
도 이미지를 불러온다는건 비슷하다.
다른 점이 있다면 같은 이미지면서 다른 크기인 이미지들이 필요한데, 그 이유는 srcset
에 등록하는 이미지들의 원본 크기에 따라 화면의 크기에 맞춰 <img>
의 src
가 변경되기 때문인 것 같다.
사용 방법은 아래와 같다.
<img srcset="image/test1.jpg 400w,
image/test1_2x.jpg 800w,
image/test1_3x.jpg 1200w"
alt="테스트1"
src="image/test1.jpg"
/>
저기서 보이는 400w, 800w, 1200w
는 화면의 크기가 아닌 이미지의 원본 크기이다.
화면의 크기가 400px 이하일 때
image/test1.jpg
가src
에 set이 되고,
화면의 크기가 401px ~ 800px 까지는image/test1_2x.jpg
가 될 것이며,
화면의 크기가 801px 이상일 때image/test1_3x.jpg
가 실행될 것이다.
src
에 적힌 이미지는 언제 사용되는지 궁금해서 찾아보았는데, srcset
가 호환이 안되는 브라우저일 경우 src
로 보여준다고 한다.
바로 그게 IE..
너는 대체..
srcset
과 같이 나오는 녀석이다. 이미지를 최적화할 출력 크기를 정하는 속성이라고 한다. 말이 어려워
반응형을 한다고 하면 원하는 화면크기에 font-size, padding
등 작업을 해줘야 할 때, @media..(미디어쿼리)
를 이용한 적이 있을 것이다.
sizes
는 바로 미디어 조건을 이용해 원하는 화면 크기에 맞게 이미지의 크기를 정할 수 있다는 점에서 css로 작업 하는게 아닌 HTML에서 @media..
를 설정할 수 있게 도와준다고 이해했다.
사용 방법은 아래와 같다.
<img srcset="image/test1.jpg 400w,
image/test1_2x.jpg 800w,
image/test1_3x.jpg 1200w"
sizes="(min-width: 1200px) 800px"
alt="테스트1"
src="image/test1.jpg"
/>
srcset
이 작동하면서 sizes
를 살펴보면 800px 너비의 소스를 사용하기 위해선 뷰포트가 1200px 이상이어야 된다는 뜻이다.
화면의 크기가 400px 이하일 때
image/test1.jpg
화면의 크기가 401px ~ 800px 일 때image/test1_2x.jpg
화면의 크기가 801px ~ 1199px 일 때image/test1_3x.jpg
화면의 크기가 1200px 이상일 때image/test1_2x.jpg
이미지를 2장 이상 준비해야한다는 단점이 있지만, 있다면 사용하는게 좋다고 생각한다.