보통 웹 사이트에서 이미지를 화면 상에 그리기 위해서 <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
'HTML & CSS' 카테고리의 다른 글
[HTML] SVG 가 SVG 로 불리는 이유와 렌더링 순서(작성중인 문서) (0) | 2024.04.07 |
---|---|
[CSS] & | SCSS 를 쓰지 않고도 CSS 도 중첩 사용이 가능하게 해줌 (1) | 2023.12.16 |
[HTML/JS] 웹 접근성을 고려한다면, 꼭 알아야 하는 속성 aria-controls 와 aria-selected 에 대한 정리 (0) | 2023.10.10 |
[SCSS/SASS] 기초 사용법 정리 (0) | 2023.07.01 |
[html/css] js 코드 없는 아코디언 "클릭하면 스르륵 답변창이 나오는 게시판?" (0) | 2023.02.25 |