img 태그에 srcset 속성을 사용하는 이유

srcset 속성을 사용하는 이유

• 기기의 디스플레이 너비에 따라 다른 이미지를 사용자에게 제공하려는 경우
• 레티나 디스플레이를 통해 고품질 이미지를 제공하여 사용자 경험을 향상
• 저해상도 저사양 기기에 제공하여 성능을 높이고 데이터 낭비를 줄인다. (더 큰 이미지를 제공하는 것은 눈에 보일 정도의 차이가 없기 때문)

쉽게 생각 하자면

- 스마트폰에서 5000x2500 같은 큰 이미지 파일을 쓴다면 의미없는 통신 시간이 발생

- PC에서 작은 이미지를 쓴다면 이미지가 깨지거나 흐릿

⇒ 표시 장치에 따라 이미지를 바꿔 보여줄 필요가 있다 ⇒ 반응형

---

@media 대신 srcset 속성을 쓰는 이유

일반적으로 반응형 웹에서 이미지를 지원하기 위해서는 ‘미디어쿼리’라고 하는 @media를 사용하는데, 이때 Viewport의 크기부터 사용자 화면의 해상도 등 많은 환경들을 개발자가 고려해서 작성 해줘야 한다. 하지만, img태그의 srcset과 sizes 속성을 이용하면 이미지의 크기를 설정하는 것만으로 대부분의 고려 사항을 브라우저에게 이미지 선택권을 떠넘겨서 반응형 웹을 만들어낼 수 있다. 다만, 다른 비율의 다양한 크기의 다른 이미지들을 사용하고 싶다면 @media를 사용하면 된다.

---

사용방법

<img src="test.png"
srcset="
test_small.png 400w,
test_medium.png 700w,
test_large.png 1000w
"    
sizes="
(max-width: 500px) 444px,
(max-width: 800px) 777px,
1222px
"
alt="" />

/* ================== */

<img src="이미지경로"
srcset="
이미지경로 원본크기,
이미지경로 원본크기,
이미지경로 원본크기
"
size ="
(미디어조건문) 최적크기,
(미디어조건문) 최적크기,
기본출력크기
"
alt="" />

srcset

srcset 속성은 브라우저에 사용할 이미지들과 이미지들의 원본 크기를 지정해주는 속성이며, 사용할 이미지를 같은 비율의 다양한 크기를 가지는 동일 이미지로 최소 2장 이상 준비 해줘야한다.

• ex) CSS의 @media 속성으로 작성할 경우

  .some-image { 
    width: 400px; 
    height: 400px; 
    background-image: url("test_small.png");
    background-repeat: no-repeat;
    background-size: cover; 
  } 
  
  @media (min-width: 401px) {
    .some-image { 
    background-image: url("test_medium.png"); 
    }
  }
  
  @media (min-width: 701px) { 
    .some-image { 
    background-image: url("test_large.png"); 
    }
  }​

srcset="
test_small.png 400w, //w는 픽셀단위 라고 생각하면 된다. 400x320px 이미지일 경우 400w
test_medium.png 700w, //구분은 ,(콤마)로
test_large.png 1000w
"

• Viewport 너비가 400px 이하일 때는 test_small.png(400px)가 사용됨.
• Viewport 너비가 401~700px 일 때는 test_medium.png(700px)가 사용됨.
• Viewport 너비가 701px 이상일 때는 test_large.png(1000px)가 사용됨.
• 작은 크기 이미지부터 순서대로 입력 해야한다.
• 고정된 이미지 크기를 유지하려면 width 속성을 추가 하면 된다.

size

size 속성은 부가적인 사항이며, 미디어조건과 그 조건에 해당하는 **이미지의 ‘최적화 출력 크기’**를 지정 해준다. 너비값으로는 절대값(px,em)이나 상대값(vw)만 사용할 수 있다. 퍼센트는 사용할 수 없다. ****또한 sizes와 width를 같이 작성할 경우 width가 우선되어 sizes 속성은 적용되지 못한다.

srcset="
test_small.png 400w,
test_medium.png 700w,
test_large.png 1000w
"
sizes="(min-width: 1000px) 700px" //,(콤마)로 더 추가 할 수 있다.

• Viewport 너비가 400px 이하일 때 test_small.png(400px)가 사용됨
• Viewport 너비가 401~700px 일 때 test_medium.png(700px)가 사용됨
• Viewport 너비가 701~999px 일 때 test_large.png(1000px)가 사용됨
• Viewport 너비가 1000px 이상일 때 test_medium.png(700px)가 사용됨 ⇒ 뷰포트 너비(가로)가 1000px 이상일 때, 이미지를 700px로 최적화 출력하겠다’를 의미

---

지원불가

IE에서는 지원이 안된다.