[HTML] srcset 속성을 사용해 웹 페이지의 성능과 사용자 경험을 개선해보자!

srcset 속성은 HTML 이미지 태그에서 사용되는 속성으로, 여러 개의 이미지 파일을 지정하여 사용자의 기기 및 연결 속도에 따라 적절한 이미지를 선택할 수 있게 해준다. 이를 통해 웹 페이지의 로딩 속도를 향상시키고, 사용자 경험을 개선할 수 있다.

 

srcset 속성을 사용하면 좋은 점:

1. 웹 페이지의 로딩 속도 향상: 적절한 이미지만 로딩하기 때문에, 웹 페이지가 빠르게 접속될 수 있다.
2. 사용자 경험 개선: 이미지의 크기가 적절한 기기에서 제대로 보일 수 있기 때문에, 사용자의 이미지 경험이 개선된다.
3. 반응형 웹 디자인 지원: srcset 속성을 사용하면, 적절한 이미지를 선택할 수 있기 때문에, 반응형 웹 디자인을 지원할 수 있다.
4. 용량 절감: srcset 속성을 사용하면, 적절한 이미지만 선택하기 때문에, 이미지 용량이 절감된다. 이는 웹 페이지의 로딩 속도를 개선하고, 저장 공간을 절약할 수 있다.

 

srcset 속성은 어떻게 사용하나?

srcset 속성은 HTML 이미지 태그의 src 속성과 함께 사용된다. src 속성으로 지정한 이미지는 기본 이미지로 사용되며, srcset 속성으로 지정한 이미지들은 사용자의 기기 및 연결 속도에 따라 적절한 이미지를 선택하게 된다. srcset 속성에 지정한 이미지들은 콤마(,)로 구분하여 지정할 수 있으며, 이미지 파일 이름 뒤에 괄호 안에 가로 크기를 지정할 수 있다. 예를 들어, srcset 속성으로 "large.jpg 1024w, medium.jpg 640w, small.jpg 320w"를 지정할 경우, 이미지 파일 이름과 가로 크기가 지정된 이미지들이 제공된다. 이렇게 제공된 이미지들 중에서 적절한 이미지가 선택될 수 있다.

 

srcset 사용 방법은 다음과 같다.

1. 가로 크기로 지정한 이미지 제공: srcset 속성으로 각 이미지의 가로 크기를 지정할 수 있다. 예를 들어, "large.jpg 1024w, medium.jpg 640w, small.jpg 320w"라고 지정할 경우, 각 이미지의 가로 크기가 지정된 이미지가 제공된다.
2. 슈팅 값으로 지정한 이미지 제공: srcset 속성으로 각 이미지의 슈팅 값(pixel density value, DPI)을 지정할 수 있다. 예를 들어, "large.jpg 2x, medium.jpg 1.5x, small.jpg 1x"라고 지정할 경우, 각 이미지의 슈팅 값이 지정된 이미지가 제공된다.
3. 가로 크기와 슈팅 값을 같이 지정한 이미지 제공: srcset 속성으로 각 이미지의 가로 크기와 슈팅 값을 같이 지정할 수 있다. 예를 들어, "large.jpg 2x 1024w, medium.jpg 1.5x 640w, small.jpg 1x 320w"라고 지정할 경우, 각 이미지의 가로 크기와 슈팅 값이 지정된 이미지가 제공된다.

위 사용 방법의 예시.

가로 크기로 지정한 이미지 제공

<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" alt="image">

 

슈팅 값으로 지정한 이미지 제공

<img src="small.jpg" srcset="large.jpg 2x, medium.jpg 1.5x, small.jpg 1x" alt="image">

 

가로 크기와 슈팅 값을 같이 지정한 이미지 제공

<img src="small.jpg" srcset="large.jpg 2x 1024w, medium.jpg 1.5x 640w, small.jpg 1x 320w" alt="image">