srcset = ? sizes=?

이미지 반응형을 어떻게하면 좀 더 좋아질까 검색하던 중에 <img> 태그에서 srcset, sizes를 이용하면 반응형에 좋다는 글이 있어서 공부했다.

srcset

<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..
너는 대체..

sizes

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장 이상 준비해야한다는 단점이 있지만, 있다면 사용하는게 좋다고 생각한다.