HTML 9일차 공부 <picture> Tag

 

- HTML Picture Element

• <img> tag

1. <img> tag는 단독으로도 사용이 가능하지만, picture의 하위 태그로도 사용
2.   단독으로 사용하는 <img> 태그도 제한적으로 반응형 레이아웃을 지원
3. 태그의 "srcset" 속성을 이용하면 웹 브라우저 너비 변경에 맞춰 적절한 이미지 파일이 로딩되어 가변 크기로 표시e됨.

 

 

• <picture> tag

1. 반응형 웹 이미지를 구현
2. <img> 요소의 다중 이미지 리소스(multiple image sources)를 위한 컨테이너 정의시 사용
3. <picture> 태그는 하위 태그인 <source>, <img> 태그를 감싸는 래퍼 역할만을 하며, 실제 모든 반응형 이미지 정보는 <picture> 태그의 하위 태그인 <source> 태그를 통해 표현

 

w3schools의 말을 인용하면

 

Bandwidth
If you have a small screen or device, it is not necessary to load a large image file. The browser will use the first <source> element with matching attribute values, and ignore any of the following elements.

 

Format Support
Some browsers or devices may not support all image formats. By using the <picture> element, you can add images of all formats, and the browser will use the first format it recognizes, and ignore any of the following elements.

 

이 글을 살펴보면, 

<source>tag를 통해, 디바이스 화면 크기에 따라 자동적으로 이미지의 크기를 변경해주는 것을 의미한다. 또한, 이미지 형식이 지원되지 않는 경우 대체 이미지를 지원하는 것이다.

 

http://www.tcpschool.com/html-tags/picture

 

728x90