/ HTML

img태그에서 srcset속성을 사용하는 이유

HTML은 다음과 같이 구성되어 있습니다.




img태그에서 srcset 속성을 사용하는 이유

srcset 속성은 사용자의 디스플레이에 따라서 다른 해상도의 이미지를 제공하기 위해 사용합니다. 사용자가 고사양의 디스플레이라면 고품질의 이미지를, 저사양의 디스플레이라면 저품질의 이미지를 제공하기 위함입니다.

srcset 속성

같은 비율의 다양한 크기를 가지는 동일 이미지들을 최소 2개 이상 명시하는 속성

<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">

위처럼 해주면 small.jpg는 뷰포트 너비가 500px 이하일 때, medium.jpg는 뷰포트 너비가 501px~1000px일때 , medium.jpg는 뷰포트 너비가 1001px 이상일 때 사용됩니다.

End.