[attribute] HTML - srcset 속성 - 다른 환경에서 적용할 이미지소스 지정 (= srcset속성 = 에스알시셋속성/소스셋속성)

1. srcset 예제 - <img> 경우
2. srcset 정의
3. srcset 구문
4. srcset 예제 - <source> 경우

srcset 예제 - <img> 경우

 

<img src="homzzang.jpg" 

     srcset="homzzang-large.jpg 1024w,

             homzzang-medium.jpg 640w,

             homzzang-small.jpg 320w"

     sizes="(min-width:750px ) 50vw, 100vw"

     alt="홈짱닷컴 (Homzzang.com)">

 

---

PS. 코드 의미

 

1. srcset 속성 의미

• homzzang-large.jpg: 1024px 이상 화면용.
• homzzang-medium.jpg: 640px 이상 1023px 이하 화면용.
• homzzang-small.jpg: 320px 이상 639px 이하 화면용.

 

2. sizes 속성 의미

• 이미지가 나타나는 공간의 크기를 정의.
• 위 코드 경우, 화면의 너비가 768px 이상인 경우에는 50%의 너비를, 그 외의 경우에는 100%의 너비를 사용.

srcset과 sizes 속성을 함께 사용하면, 다양한 크기와 해상도의 디바이스에서 최적화된 이미지를 제공 가능.

 

srcset 정의

 

다른 해상도 환경에서 적용할 이미지 소스 지정.

 

---

 

1. srcset 속성 사용 가능 태그 종류

<img>, <source>

• <source> 경우, <picture> 태그 안에서만 사용 가능.

 

2.

주요 최신 브라우저 모두 지원.

 

srcset 구문

 

• <img srcset="URL resolution, URL resolution, ..." sizes="(screenWidth) Width, (screenWidth) Width, ...">
• <source media="(resolution)" srcset="URL">

 

---

[속성값]

 

URL

필수. 이미지 URL주소 지정. (※ 상대주소/절대주소 모두 가능)

resolution
필수. 해당 이미지 소스가 적용되는 해상도 구간  지정. 

• <img> 경우, 640w 형식 사용. (※ 적용 최소 너비 의미.)
• <source> 경우, min-width:640px 또는, max-width:640px 형식 사용.

 

 

srcset 예제 - <source> 경우

 

<picture>

  <source media="(min-width: 650px)" srcset="https://i.imgur.com/3h0LOk9.gif"><!--능글-->

  <source media="(min-width: 465px)" srcset="https://i.imgur.com/YrkG5xB.gif"><!--키스-->

  <img src="https://i.imgur.com/PQNhCln.gif" alt="Flowers" style="width:auto;"><!--협박-->

</picture>

 

결과보기

---

PS. 코드 의미

 

• 화면 너비가 650px 이상인 경우, 능글(gif) 이미지 사용.
• 화면 너비가 465px 이상 650px 미만 경우, 키스(gif) 이미지 사용.
• 그외는 협박(gif) 이미지 사용.