HTML img tag srcset 속성을 사용하여 반응형 이미지를 정의하는 방법 

img 태그의 srcset 속성을 사용하면 기본 설정에 따라 브라우저가 픽셀 밀도 또는 창 너비에 따라 사용할 수 있는 반응형 이미지를 설정할 수 있습니다. 

이렇게 하면 예를 들어 휴대 기기에 있는 경우 더 큰 이미지를 다운로드하지 않고도 페이지를 렌더링 하는 데 필요한 리소스만 다운로드 할 수 있습니다.

https://flaviocopes.com/html-responsive-images-srcset/ 

다음은 4 가지 화면 크기에 대해 4 개의 이미지를 추가로 제공하는 예입니다.

<img src="dog.png"
  alt="A picture of a dog"
  srcset="dog-500.png 500w,
         dog-800.png 800w,
       dog-1000.png 1000w,
       dog-1400.png 1400w">

srcset에서 w 측정 값을 사용하여 창 너비를 나타냅니다.

그렇게 하기 때문에 size 속성도 사용해야 합니다 :

<img src="dog.png"
  alt="A picture of a dog"
  sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"
  srcset="dog-500.png 500w,
         dog-800.png 800w,
       dog-1000.png 1000w,
       dog-1400.png 1400w">

이 예제에서 크기 속성의 (max-width : 500px) 100vw, (max-width : 900px) 50vw, 800px 문자열은 여러 조건을 쉼표로 구분하여 뷰포트와 관련된 이미지의 크기를 나타냅니다.

미디어 조건 max-width : 500px는 뷰포트 너비와 관련하여 이미지의 크기를 설정합니다. 즉, 창 크기가 500px 미만이면 이미지를 창 크기의 100 %로 렌더링 합니다.

창 크기가 더 크지만 <900px이면 이미지를 창 크기의 50%로 렌더링 합니다.

더 큰 경우 800px로 이미지를 렌더링 합니다.

vw 측정 단위는 새로운 것이 될 수 있습니다. 간단히 말해 1 vw는 창 너비의 1 %이므로 100vw는 창 너비의 100 %입니다.

srcset 및 점진적으로 작은 이미지를 생성하는 유용한 웹 사이트는 https://responsivebreakpoints.com/입니다.