picture 태그 사용하는 방법

picture 태그는 반응형 웹사이트에서 모바일, 태블릿, 데스크탑 브라우저의 가로폭과 해상도에 맞춰서 적절한 이미지를 렌더링할 수 있도록 도와주는 태그입니다.

.

<picture> 태그는 하위 태그로 하나 이상의 <source> 태그와 하나의 <img> 태그를 가집니다.

.

<picture> 태그를 사용하는 한가지 예 입니다.

<picture>
  <source media="(min-width: 700px)" srcset="/examples/images/people_960.jpg">
  <source media="(min-width: 400px)" srcset="/examples/images/people_575.jpg">
  <img src="/examples/images/people_200.jpg" alt="People">
</picture>

위의 코드에서 <source> 태그를 통해 브라우저의 가로폭이 700px 이상일 경우와 400px 이상의 경우 각기 다른 사이즈의 이미지를 제공하고 있습니다. 두 가지 조건에 만족하지 않는 브라우저의 너비가 400 미만 일때 img 태그의 src 값 그대로 사용됩니다. 그리고 브라우저의 가로폭이 700이상일 때의 경우 source 태그의 srcset 값을 img태그의 src 값으로 불러와서 렌더링합니다.

.

또한 레티나 디스플레이 등 고해상도를 고려해서 다음과 같이 source 태그의 srcset으로 두개의 이미지 소스를 지정해 줄 수 있습니다.

<picture>
  <source media="(min-width: 700px)" srcset="/examples/images/people_960.jpg, /examples/images/people_960_2.jpg 2x">
  <source media="(min-width: 400px)" srcset="/examples/images/people_575.jpg, /examples/images/people_575_2.jpg 2x">
  <img src="/examples/images/people_200.jpg" alt="People">
</picture>

.

이렇게 사용하면 고해상도 모니터에서 브라우저의 가로폭이 700px 이상일때 people_960_2.jpg 파일을 렌더링 할 수 있습니다.

.

이렇게 picture 태그를 사용하는 방법에 대해서 알아봤습니다.

감사합니다.