[HTML] srcset 속성이란?

 

srcset 속성은 HTML5에서 도입된 반응형 이미지를 위한 속성입니다.

이 속성을 사용하면 브라우저가 다양한 화면 크기와 해상도에 맞는 최적의 이미지를 선택할 수 있게 됩니다.

1. 기본 구조:

   <img src="기본이미지.jpg" srcset="이미지목록" sizes="미디어조건" alt="설명">

2. srcset 속성 구문

• 여러 이미지 소스와 해당 이미지의 너비를 지정합니다.
• 형식: 이미지URL 너비w, 이미지URL 너비w, ...

예시:

   <img src="small.jpg" 
        srcset="small.jpg 300w, 
                medium.jpg 600w, 
                large.jpg 1200w"
        alt="반응형 이미지">

3. sizes 속성

• 미디어 조건에 따른 이미지 표시 크기를 지정합니다.
• 브라우저가 적절한 이미지를 선택하는 데 도움을 줍니다.

예시:

   <img src="small.jpg" 
        srcset="small.jpg 300w, 
                medium.jpg 600w, 
                large.jpg 1200w"
        sizes="(max-width: 600px) 300px,
               (max-width: 1200px) 600px,
               1200px"
        alt="반응형 이미지">

4. 장점

• 디바이스 특성에 맞는 최적의 이미지 제공
• 불필요한 대용량 이미지 다운로드 방지
• 페이지 로딩 속도 향상
• 모바일 데이터 사용량 절감

5. 브라우저 지원

• 대부분의 최신 브라우저에서 지원됩니다.
• 지원하지 않는 브라우저는 src 속성의 이미지를 사용합니다.

6. 고해상도 디스플레이 대응

• 픽셀 밀도를 고려한 이미지 제공 가능

   <img src="image-1x.jpg" 
        srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x" 
        alt="고해상도 대응 이미지">