<picture>

<picture>

• IE에서 지원하지 않음
• 사용자의 환경에 따라 최적화된 이미지를 제공할수 있게 도와준다.

<source>

• <source> 요소가 <picture> 요소 내부에서 사용될 때 반드시 srcset 속성이 명시되어야 한다.
• srcset 속성은 각각 다른 환경에서 사용될 이미지의 URL을 명시

※ 이미지 포맷

• .jpg / .png: 모든 브라우저에서 지원하는 폴백 이미지
• .webp: jpg/png 대비 30~70% 용량. (IE 미지원)
• .avif: 저용량 + 고품질. (크롬 지원)
  
  구형 브라우저 폴백 이미지로 제공하는 것외에 굳이 jpg를 사용할 필요가 없다.
  이미지 용량을 절감하면 빠른 로딩속도로 사용자경험(UX)을 높이고 이미지 전송비용을 절약할수 있다.

[type] 분기

• 사용자의 브라우저가 해당 이미지 포맷을 지원하는지에 따라 분기

<picture>
  <!-- if (avif 포맷을 지원하면) -->
  <source srcset="x.avif" type="image/avif">
  <!-- else if (webp 포맷을 지원하면) -->
  <source srcset="x.webp" type="image/webp">
  <!-- else -->
  <img src="x.jpg" alt="">
</picture>

[media] 분기

• 사용자의 해상도에 따라 분기

<picture>
  <!-- if (사용자의 해상도가 960px 이하일때) -->
  <source srcset="small.webp" media="(max-width: 960px)">
  <!-- else -->
  <img src="large.webp" alt="">
</picture>

resolution(해상력) 분기

• 레티나 디스플레이를 분기할 수 있는 값의 작성 방법 ("2x")
  • srcset에 이미지 경로를 적은 후 한칸 띄고 2x 작성
  • 쉼표를 기준으로 폴백이미지 분기
• img에도 적용 가능
  • src 속성에 폴백이미지를 넣으면 된다.

<picture>
  <source srcset="2x.webp 2x, 1x.webp" type="image/webp">
  <img srcset="2x.jpg  2x" src="1x.jpg" alt="">
</picture>

레티나 디스플레이 (고 해상력)

• 일반적인 이미지보다 두 배 더 큰 이미지를 제공해서 강제로 작게 사이즈를 줄여 화면을 출력하면 더 선명하게 보이는 방법