srcset, sizes을 이용한 반응형 이미지

<img
       srcset="images/heropy_small.png 400w,
                 images/heropy_medium.png 700w,
                 images/heropy_large.png 1000w

          sizes="(min-width: 1000px) 700px"
           src="images/heropy.png"
           alt="HEROPY" />

 

sizes= 500px 로 하면 medium 이미지가 나오고 가로 500 고정된다.

width=500px 로 하면 가로는 500인데 400w이하일 때 1번째 이미지 700w이하일 때 2번째 이미지. 이런식으로 이미지만 바뀐다.

 

IE를 지원하지 않음에 주의하자.