반응형 이미지 관리하기 img, picture 태그

반응형 이미지 구현에서 picture 태그를 사용하는 방법

<picture>
  <source
    width="576"
    height="576"
    media="(max-width: 575px)"
    srcset="images/Hero_Mobile.webp"
  />
  <source
    width="960"
    height="770"
    media="(min-width: 576px) and (max-width: 960px)"
    srcset="images/Hero_Tablet.webp"
  />
  <img width="1920px" height="893px" src="images/Hero_Desktop.webp" />
</picture>

사용방법
<picture> 요소: 반응형 이미지 기능을 제공하는 컨테이너 역할을 한다
<source> 요소를 포함할 수 있으며, 각 <source> 요소는 미디어 쿼리 조건에 따라 다른 이미지를 사용하도록 지정!

<picture>의 midia 속성에 @media query 형식으로 뷰포트 넓이를 기재하면 브라우저가 환경에 따라 적절한 이미지를 선택한다.
이렇게 이전 기술이 동작할 수 있는 환경을 대비해 두고 최신 기술을 제공하는 방법을 점진적 향상기법 Progressive enhancement 이라고 한다

img 태그 해상도 높히기

  <img srcset="images/2배수-이미지.png 2x,
		     images/3배수-이미지.png 3x" 
    src="images/기본-이미지.png" 
    alt="x서술자 활용 예제">

<img> 의 srcset 속성으로는 화면 밀도를 기준으로 한 x 서술자, 뷰포트 너비를 기준으로 한 w 서술자가 있다.

정리

해상도에 따라 같은 이미지를 고화질로 보여주고 싶을 때 img srcset을, 해상도에 따라 다른 이미지 or 다른 포맷을 보여주고 싶을 때에는 picture를 사용하면 된다.