이미지 태그에 srcset 속성을 사용하는 이유는 무엇인가요? 이 속성의 컨텐츠를 실행할 때 브라우저의 프로세스를 설명하세요.

김인기·2022년 12월 12일

1.srcset 정의?

같은 비율의 다양한 크기를 가지는 동일 이미지 2개 이상 명시하여 diplay상황에 맞게 사용하게 하는 속성입니다

사용자의 디스플레이 사양에 따라 다른 해상도의 이미지를 출력합니다.
스마트폰 같은 기기에 모니터의 해상도(ex:5000x2500) 같은 이미지파일을 보내면 통신기간이 길어지거나, 해상도가 깨질 위험이 크기 때문입니다.

크기가 다른 사진 준비
크기가 작은 이미지파일부터 사용
크기의 단위는 ~x or ~w 사용(px는 사용안함)

우선 기본값 이미지를 불러옵니다.

<img src="banana.jpg"/>

그 다음 srcser의 속성을 적용합니다.

<img srcset="banana.jpg" 400w, 
        "banana2.jpg" 700w, 
        "banana3.jpg" 1000w"
        src="images/heropy.png"
        alt="바나나" />

여기서 주목해야할 부분은 400w.700w.1000w의 w입니다.
이해하기 쉽게 w는 "픽셀의 수"라고 가정하셔도 됩니다.

1~400픽셀 화면이면 400w의 banana.jpg 사용
401~699픽셀 화면이면 700w의 banana2.jpg 사용
701~1000w픽셀 화면이면 1000w의 banana3.jpg 사용
ex) 화면크기 505는 banana2.jpg 사용

이런 식으로 srcset으로 이미지를 묶어 사용하시면 됩니다. 이상입니다.

성장노트