반응형 이미지 최적화의 핵심, Picture tag로 전송 용량 줄이기

반응형으로 이미지를 적용할 경우 사용한다.
미디어 넓이를 기준으로 적용하는데, 적용 시 실제 img 태그는 적용되지 않고 source 내 이미지 경로를 찾아 적용한다.

단, 화면 넓이 확인이 늦어질 경우, img 태그가 노출된다.
화면 내 불필요한 이미지 추가가 없어 접근성 사용에 용이하다

 

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers">
</picture>

참조 : https://www.w3schools.com/tags/tag_picture.asp