아직 완벽하게 이해한 건 아니지만 설명이 잘되어 있는 블로그가 있어서 이를 기반으로 작성하고 추후 계속하여 수정할 예정이다.
1. img 태그의 srcset속성
(1) 정의
각각 다른 다양한 상황에서 사용될 이미지의 url과 원본 크기를 지정해주는 속성
(2) 사용 이유
- 작은 화면에 UI를 나타낼 때 사이즈가 큰 이미지 파일을 보내면 통신 시간이 길어짐 =>❗성능저하
- 작은 화면에 어울리는 이미지를 큰 화면에서 열면 이미지가 흐릿하게 보임.
💡 표시 장치에 따라 이미지를 바꿀 필요가 있다 => 반응형 이미지 필요 (Responive Image)
(3) 사용 방법
💭 기본 구조
<img src="flamingo-fallback.jpg" srcset="flamingo-fallback1x.jpg 1000w, flamingo-fallback2x.jpg 2000w, flamingo-fallback3x.jpg 3000w" />
여기에서 w를 정확히 정의하면 실제 이미지의 크기를 의미하지만 srcset의 원리를 이해하기 위해서 픽셀수라고 생각하면 좀 더 쉽게 이해 가능하다.
즉, 1000w은 1000픽셀 폭의 이미지를, 2000w은 2000픽셀 폭의 이미지라고 생각하면 된다.
이미지(w) 🔜 브라우저
이미지의 width(w)를 브라우저에 전달하고, 브라우저는 전달받은 정보를 바탕으로
flamingo-fallback1x 1000w.jpg
flamingo-fallback2x 2000w.jpg
flamingo-fallback3x 3000w.jpg
중 어떤 이미지를 보여줄지 선택한다.
💭 브라우저가 이미지 선택하는 방법
예를 들어 내가 사용하고 있는 화면이 1800w의 화면이라고 가정할 때,
위의 3개의 이미지 중에 화면 너비를 꽉 채울 수 있는 img를 선택한다.
그렇다면 어떤 이미지가 화면 너비를 꽉 채울 수 있을까??
🧠 브라우저의 알고리즘
과연 브라우저는 어떤 이미지를 선택할까??
바로바로바로바로
w와 화면 비율이 1 이상인 것들 중 가장 작은 이미지 선택한다는 것이다
지금부터 브라우저의 알고리즘을 천천히 알아보자
1. flamingo-fallback1x 1000w.jpg ❌
=> 화면은 1800w인데 위 이미지는 1000w이기 때문에 화면 너비를 꽉 채워서 보여 줄 수 없다.
쉽게 말하면 화면은 1800픽셀인데 이미지는 1000픽셀이다. 그렇다면 브라우저는 "픽셀 수가 부족하네?" 라고 느끼고 픽셀을 계산 해본다.
1800px 화면 폭에 1000w 이미지를 표시하는 것 => 1000/1800 = 0.555
결과 값이 1 미만이면 이미지의 픽셀 수가 부족하여 이미지가 깨진다는 것을 의미한다.
브라우저는 이러한 과정으로 "1번 이미지는 깨지니까 못쓰겠군"이라는 결론에 도달하고 1번 이미지를 보여주지 않는다.
2. flamingo-fallback2x 2000w.jpg ⭕
1800px 화면 폭에 2000w 이미지를 표시하는 것 => 2000/1800 = 1.11
3. flamingo-fallback3x 3000w.jpg ❌
1800px 화면 폭에 3000w 이미지를 표시하는 것 => 3000/1800 = 1.66
두 이미지 모두 비율이 1이 넘는다. 앞에서 브라우저는 "w와 화면의 비율이 1 이상인 것들 중 가장 작은 이미지 선택" 한다고 했다.
따라서 최종적으로 이미지 크기가 더 작은 2번 이미지 가 선택 되는 것이다.
(4) 이미지 크기 조정 방법(sizes)
여기서 srcset만 단독으로 사용하게 된다면
이미지는 화면크기에 가득 차는 상태가 기준이 된다.
항상 이미지가 화면에 가득 차는 걸 보여주고 싶은 건 아니니까 ...
나온 속성이 sizes이다 !!
예를 들어 이미지를 화면의 1/10의 크기로 보여주고 싶다면
<img src="flamingo-fallback.jpg" srcset="flamingo-fallback1x.jpg 1000w, flamingo-fallback2x.jpg 2000w, flamingo-fallback3x.jpg 3000w" size="10vw"/>
위와 같이 sizes 속성을 적어주면 된다.
여기서 size="10vw"는 "viewport width"의 약자이며
여기서 100vw가 화면을 가득 채운 비율이다.
10vw = 화면폭의 1/10
( 10vw/ 100vw )
10vw : 안녕? 나는 화면 폭의 1/10의 사진이야 🤲50vw = 화면폭의 1/2
(50vw/ 100vw)
50vw: 안녕? 나는 화면 폭의 1/2의 사진이야 🤲
