srcset attribute를 이용해서 반응형 이미지 만들기

무엇을? 

CSS media 쿼리가 아닌 HTML만을 이용하여 반응형 이미지를 만들어 보고 싶다.

 

• 일단 부모elements로 picture태그를 사용해준다.
• 그 밑에 source 태그를 사용하고, 그 안의 attrubute로 srcset으로 사진파일의 이름, media attribut로 min-width를 지정해준다.

 

    <picture>
      <source srcset="과카몰리_600.JPG" media="min-width:960px" />
      <source srcset="과카몰리_400.JPG" media="min-width:620px" />
      <img src="과카몰리_200.JPG" alt="" />
    </picture>

 

min-width는 최소 넓이로, 960px로 설정했다면 최소 넓이가 960px에 도달할 때 까지 srcset에 지정해준 사진을 사용해. 라는 뜻

 

 

 

• 화면 넓이가 960px에 도달할 때 까지는 > 과카몰리_600.JPG 사진이 나온다. 

 

 

---

• 화면을 줄여 넓이가 620px에 닿을 때 까지는 > 과카몰리_400.JPG 사진이 나온다.

 

---

• 620보다 더 작아지면 > 기본 이미지로 설정해 둔 과카몰리_200.JPG 사진이 나온다.

 

---

브라우저 지원

 

IE는 지원하지 않는다. 

 

 

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Responsive images - Learn web development | MDN

 

 The 800px picture is 128KB on disk, whereas the 480px version is only 63KB — a saving of 65KB. Now, imagine if this was a page that had many pictures on it. Using this technique could save mobile users a lot of bandwidth.

 

반응형 이미지의 장점 + 용량을 절약할 수 있다.

여기에 대해서 조금 더 깊게 공부해봐야겠다.