반응형 웹에서 이미지를 지원하기 위해서는 미디어쿼리를 사용하는데, 반응형 이미지를 처리하기 위해 뷰포트의 크기와 해상도 등 많은 환경을 고려해야 한다.
하지만 srcset과 sizes 속성을 이용하면, 쉽게는 이미지의 크기를 설정하는 것 만으로도 대부분의 고려사항들을 줄일 수 있다.
작성 방법
<img
srcset="경로 원본크기,
경로 원본크기,
경로 원본크기"
sizes="(미디어조건문) 최적크기,
(미디어조건문) 최적크기,
기본출력크기"
src="경로"
alt="대체텍스트">
<img
srcset="img/banner_small.png 400w,
img_banner_medium.png 700w,
im_banner_large.png 1000w"
sizes="(max-width: 500px) 444px,
(max-width: 800px) 777px,
1222px"
src="img/banner.png"
alt="banner">
/* srcset을 사용할 수 없는 환경에서는 src로 동작 */
srcset
img 태그의 srcset 속성은 각각 다른 다양한 상황에서 사용될 이미지의 url과 원본 크기를 지정해주는 속성이다.
반응형 웹에 사용할 이미지를 사이즈 별로 최소 2장 이상 준비하여 url을 srcset 속성값에 작성해주고 한 칸의 공백을 준 뒤, 이미지의 원본 크기를 w단위로 입력하면 된다.
w단위로 입력할 때는 이미지의 원본 크기의 가로 너비를 이용한다.
예를 들어, 400x320px의 이미지라면 400w를 입력해주면 된다.
각 사이즈 별 이미지의 구분은 콤마로 한다.
srcset="img/banner_small.png 400w,
img_banner_medium.png 700w,
im_banner_large.png 1000w"
즉 위처럼 입력을 해주게 되면, 뷰포트 너비가 400px 이하일 때는 banner_small 이미지가 보여지고, 401~700px 일 때는 banner_medium 이미지가 보여지고, 701px 이상일 때는 banner_large 이미지가 보여지게 된다.
sizes
img 태그의 sizes 속성은 미디어 조건문을 지정하고, 그 조건문에 해당하는 이미지의 최적 크기를 지정하는 속성이다.
(max-width: 320px)의 방식으로 미디어 조건문을 작성하고 한 칸의 공백을 준 뒤, 해당 조건문이 참일 때 이미지가 차지할 너비값을 입력해주면 된다.
여기에서 너비값으로는 절대값(px,em)이나 상대값(vw)만 사용할 수 있다. 퍼센트는 사용할 수 없다.
sizes="(max-width: 500px) 444px,
(max-width: 800px) 777px,
1222px"
즉 위처럼 입력을 해주게 되면, 기기 너비가 500px 아래일 경우네는 이미지가 444px로 출력되고, 800px 아래일 경우에는 777px로 출력이 된다.
그리고 아무 조건에도 해당하지 않는 경우에는 기본값으로 입력한 1222px로 출력된다.
이 속성들을 작성하면 브라우저는 다음과 같이 작동하게 된다.
- 기기의 너비를 확인한다.
- sizes 속성에 적은 미디어 조건문 중 어디에 해당하는지 확인한다.
- 해당 조건문에 적힌 최적 크기를 확인한다.
- srcset에 연결된 이미지들 중 해당 최적 크기와 가장 가까운 원본 크기를 가진 이미지만 불러온다.
만약 지금 내가 보고있는 기기의 너비가 400px이라면, sizes 속성 중 max-width: 500px 조건문에 해당할 것이고, 그러므로 이미지의 출력 크기는 444px이 된다.
그리고 srcset 속성 중 444px과 가장 가까운 원본 크기를 가진 banner_small.png(원본 크기가 400w) 이미지를 불러오므로 용량을 절약할 수 있게 된다.
참고로 두 속성 모두 ie에서는 지원하지 않는다.