[stencil+html] <picture>의 사용

<picture>의 사용법은 다음과 같다

출처 : pixabay

 

[stencil]

<picture>
    <source srcSet="image-mob.jpg" media="(min-width:0px) and (max-width:767px)" />
    <source srcSet="image-tab.jpg" media="(min-width:768px) and (max-width:1059px)" />
    <img src="image.jpg" alt=""/>
</picture>

 

[html]

<picture>
    <source srcset="image-mob.jpg" media="(min-width:0px) and (max-width:767px)">
    <source srcset="image-tab.jpg" media="(min-width:768px) and (max-width:1059px)">
    <img src="image.jpg" alt="">
</picture>

 

stencil 에서 사용이 html과 다른 점이 있다면 srcset 을 srcSet으로 표기한다는 점입니다.

 

picture 태그사용의 이점

<picture> 태그는 <source> 태그를 이용한 반응형 이미지를 사용함으로써 대역폭을 절약하고 페이지 로드 시간 단축을 위한 목적으로 사용합니다.