[HTML] <pickture> | 브라우저 크기에 대한 최적화 용도로 사용하는 이미지 태그

보통 웹 사이트에서 이미지를 화면 상에 그리기 위해서 <img> 태그를 단일로 사용한다. 그리고 브라우저의 크기에 대응하기 위해 퍼센트(%) 나 vw 를 사용하거나 미디어 쿼리를 사용하기도 한다. 하지만 이런 경우에는 이미지의 종횡비가 깨지거나 화질이 깨지는 등의 문제가 발생할 수 있고, 이는 결국 사용자 경험에 부정적일 수 밖에 없다.

 

이 때, 이를 개선하고 방지하기 위한 기능을 제공하는 <pickture>  태그를 감싸고, source 태그와 함께 사용할 수 있다.

 

용도 예시1) 다양한 해상도에 대응하는 이미지 제공

pickture 태그를 사용하면, 다양한 해상도 및 뷰포트 크기에 대응하여 다른 이미지를 제공할 수 있다. 브라우저 크기에 따라서 사용자에게 최적화된 이미지를 제공할 수 있기 때문에, 결과적으로 로딩 시간을 단축하고 대역폭을 절약할 수 있는 장점이 있다.

 

아래 예시 코드에서 source 태그는 img 태그 보다 높은 우선순위를 지니는데, media 로 지정한 조건이나 srcset 에 첨부한 이미지의 확장자가 브라우저에서 허용하는 조건을 만족시키지 못한다면, 마지막으로 img 태그로 우선순위를 넘겨주게 된다.

<picture>
  <source media="(min-width: 768px)" srcset="large-image.jpg">
  <source media="(min-width: 400px)" srcset="medium-image.jpg">
  <img src="small-image.jpg" alt="Description">
</picture>

 

 

용도 예시2) 이미지의 형식 대응

pickture 태그를 사용하면 얻을 수 있는 이점 중 두 번째는 여러 형식의 이미지를 지원하는 웹 브라우저에 대응하여 적절한 형식의 이미지를 선택할 수 있다는 점이다. 예를 들어, WebP 형식을 지원하는 브라우저에는 WebP 이미지를, 그렇지 않은 브라우저에는 JPEG 또는 PNG 이미지를 제공해줄 수 있다.

 

아래 예시에서 image의 type 이 webp 인 경우에는 srcset 을 적용하고, 그렇지 않다면 img 태그의 src 를 적용한다.

<picture>
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="Description">
</picture>

참고자료

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

<picture>: The Picture element - HTML: HyperText Markup Language | MDN