HTML <picture> 태그

요소는 뷰포트(viewport)의 너비에 따라 커지거나 작아지는 하나의 이미지를 사용하는 대신 서로 다른 디스플레이나

기기에서 해당 뷰포트에 알맞게 채워질 수 있도록 여러 개의 이미지 중에서 적절한 이미지를 사용할 수 있도록 해줍니다.

이러한 요소는 웹 개발자가 이미지의 리소스를 보다 유연하게 지정할 수 있도록 해주므로, 반응형 디자인(responsive design)에서 주로 사용합니다.

반응형 - 큰 이미지 사용시 사

<picture>
    <source srcset="https://tistory4.daumcdn.net/tistory/2933724/skin/images/hover01.jpg" media="(max-width: 600px)">
    <source srcset="https://tistory4.daumcdn.net/tistory/2933724/skin/images/hover02.jpg" media="(max-width: 1000px)">
    <source srcset="https://tistory4.daumcdn.net/tistory/2933724/skin/images/hover03.jpg" media="(max-width: 1200px)">
    <img src="https://tistory4.daumcdn.net/tistory/2933724/skin/images/hover04.jpg" alt="이미지">
</picture>