[attribute] HTML - sizes 속성 - 해상도별 이미지나 아이콘, 미디어(오디오/비디오) 등의 크기 지정 (= sizes속성 = 사이즈스속성)

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

[참고]

※ 768 입력했는데 750으로 자동으로 바뀌어 보이니 참고하세요.

※ 빠른 시일 내에 원인을 찾아 수정해 놓도록 하겠습니다. ㅡㅡ;; 

sizes 예제 - <img> 경우

 

<img srcset="homzzang-320w.jpg 320w, homzzang-480w.jpg 480w, homzzang-800w.jpg 800w"

     sizes="(max-width: 600px) 280px, (max-width:750px ) 440px, 800px"

     src="homzzang.jpg" alt="homzzang Image">

 

sizes 정의

 

'아이콘' 크기 지정하거나, 미디어쿼리(= 화면 사이즈별)에 의한 미디어(이미지/오디오/비디오) 리소스 로딩 최적화 가능한 크기 지정.

 

---

 

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

<img>, <link>, <source>

• <source> 태그는 <picture>, <video>, <audio> 태그 안에서 사용.

 

2.

• <link> 태그 경우, rel="icon" 속성 지정된 경우에만 사용 가능.
• "<img> 태그"나 "<picture>태그 안 <source> 태그" 경우, 보통 srcset 속성과 함께 사용되며, srcset에 지정된 이미지의 크기와 비율을 바탕으로 이미지를 효율적으로 로딩할 수 있도록 도와줌.

 

3.

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

단, <link> 태그 경우 지원 불완전하니 이용 시 확인 필요.

 

sizes 구문

 

• <img sizes="(screenWidth) Width, (screenWidth) Width, ...">
• <link rel="icon" sizes="HeightxWidth|any">
• <source sizes="(screenWidth) Width, (screenWidth) Width, ...">

 

---

[속성값]

• screenWidth - 적용할 스크린너비 구간 (예) max-width: 600px
• Width - 가로 사이즈 (예) 440px
• HeightxWidth - 가로x세로 (예) 16x16
• any - (SVG처럼) 크기 조정 가능

 

sizes 예제 - <link> 경우

(예) 다양한 크기의 파비콘 지정.

• 주의: <link> 태그 경우, <img> 태그와 다르게 @media 사용 않고 각각의 태그로 지정.

<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">

<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">

<link rel="icon" type="image/png" sizes="48x48" href="favicon-48x48.png">

<link rel="icon" type="image/png" sizes="64x64" href="favicon-64x64.png">

<link rel="icon" type="image/png" sizes="128x128" href="favicon-128x128.png">

<link rel="icon" type="image/png" sizes="256x256" href="favicon-256x256.png">

sizes 예제 - <source> 경우

목차

• <picture> 태그 경우
• <video> 태그 경우
• <audio> 태그 경우

---

<picture> 태그 경우

<picture>

  <source media="(min-width:750px )"

          srcset="image-800.jpg 800w,

                  image-1200.jpg 1200w,

                  image-2000.jpg 2000w"

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

  <img src="image-480.jpg" alt="이미지 설명">

</picture>

---

<video> 태그 경우

 

<video controls poster="video-poster.jpg">

  <source src="video.webm"

          type="video/webm"

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

  <source src="video.mp4"

          type="video/mp4"

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

</video>

---

<audio> 태그 경우

 

<audio controls>

  <source src="audio.ogg"

          type="audio/ogg"

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

  <source src="audio.mp3"

          type="audio/mpeg"

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

</audio>

PS. 의미
뷰포트 너비가 768px 이상일 때는 이미지의 너비를 뷰포트의 50%로 지정하고, 768px 미만일 때는 이미지의 너비를 뷰포트의 100%로 지정.