picture 태그

아쉽게도 ie 11에서 지원이 안되니, 공공SI에서 좀더 기다려야 사용할 수 있지만, 

좋은 정보였다. css와 연결성도 높아가고 있는 추세도 알게 됨.

 

<img
srcset="cat-1.jpg 500w, cat-2.jpg 1000w cat-3.jpg 2000w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1400px
src= "cat-small.jpg"/>

거기다 picture tag가 지원이 되지 않을 때 하나씩 다음 행이 지원되고 마지막엔

img 태그가 지원되게 되어 있는 것도 마음에 들었다.

loading속성에 lazy 값 

sizes속성은 사이즈에 따라 정할 수 있다니!! 

<picture>
    <source srcset="/cat-vertical.jpg" media="(orienation : portrait)">
    <source srcset="/cat-horizontal.jpg" media="(orientation : landsscape)">
    <img src="/cat-default.jpg">
</picture>

 

 srcset 이란 속성, 

 

이미지 확장자도 정리했다.

<picture>
  <source srcset="cat.jxl" type="image/jxl">
  <source srcset="cat.webp" type="image/webp">
  <source srcset="cat.avif" type="image/avif">
  <img src="cat.jpg">
</picture>

 

 

https://www.youtube.com/watch?v=8EWwyAcqR6o 

출처 : Nomad Coders 

노마드 코더 Nomad Coders  님의 유튜브 보고 정리해봄.

 

솔직히 정리한 이유는 이렇게 타이핑 하지 않으면 다음에 써먹을 때 떠올리지 못할 것 같아서.