<img /> 속성의 srcset과 sizes
회사 홈페이지 SEO 개선을 하면서 성능에 대해 관심이 많아졌다.
이미지를 어떻게 로드해서 어떻게 보여줄지도 큰 관심거리다.
<img /> 태그의 srcset, sizes 속성을 이용해 기기 해상도나 뷰포트 크기에 따라 적절한 이미지를 선택해서 로딩할 수 있다.
구글링해봤는데 정리가 잘 된 자료가 있었고, 아래에 요약해서 정리했다.
더 자세히 알고 싶다면 원본글을 보시는 걸 추천합니다~~~
📌 srcset
브라우저의 뷰포트 너비나 디스플레이 해상도에 대한 반응형 이미지 소스를 정의
// 사용 예시
<img srcset="
이미지1 이미지1를_렌더링할_최대뷰포트너비_or_최대디스플레이해상도1,
이미지2 이미지2를_렌더링할_최대뷰포트너비_or_최대디스플레이해상도2,
이미지3 이미지3를_렌더링할_최대뷰포트너비_or_최대디스플레이해상도3,
..."
/>
📍 언제 사용할까
1. 브라우저 뷰포트 너비에 대한 이미지 소스를 지정
2. 디스플레이 해상도에 대한 이미지 소스를 지정
3. 브라우저 뷰포트 너비에 대한 이미지 소스와 디스플레이 해상도에 대한 이미지 소스를 함께 지정
1. 브라우저 뷰포트 너비에 대한 이미지 소스를 지정
<img srcset="
my-img-small-480px.jpg 480w,
my-img-medium-700px.jpg 700w,
my-img-large-1000px.jpg 1000w
"
/>- my-img-small-480px.jpg 480w 👉🏻 뷰포트 너비가 480w 이하 일때, my-img-small-480px.jpg 렌더링
- my-img-medium-700px.jpg 700w 👉🏻 뷰포트 너비가 700w 이하 일때, my-img-medium-700px.jpg 렌더링
- my-img-large-1000px.jpg 1000w 👉🏻 뷰포트 너비가 1000w 이하 일때, my-img-medium-700px.jpg 렌더링
🌟 w 단위는 w descriptor라 부르는데, viewport width(뷰포트 너비)의 약자이며, 길이 단위로 환산하면 px과 동일하다.
2. 디스플레이 해상도에 대한 이미지 소스를 지정
<img srcset="
my-img-small-480px.jpg 1x,
my-img-medium-700px.jpg 2x,
my-img-large-1000px.jpg 3x
"
/>- my-img-small-480px.jpg 480w 👉🏻 디스플레이 해상도가 1x 이하일 때, my-img-small-480px.jpg 렌더링
- my-img-medium-700px.jpg 700w 👉🏻 디스플레이 해상도가 2x 이하일 때, my-img-medium-700px.jpg 렌더링
- my-img-large-1000px.jpg 1000w 👉🏻 디스플레이 해상도가 3x 이하일 때, my-img-medium-700px.jpg 렌더링
🌟 x 단위는 x descriptor라 부르는데, 배수라는 뜻이다. 1x는 1배, 2x는 두배, 3x 세배라는 뜻이다.
3. 브라우저 뷰포트 너비에 대한 이미지 소스와 디스플레이 해상도에 대한 이미지 소스를 함께 지정
<img srcset="
my-img-small-480px.jpg 480w,
my-img-medium-700px.jpg 2x,
my-img-large-1000px.jpg 1000w
"
/>
1과 2를 적절하게 합쳐서 지정할 수 있다.
🌟 단, w descriptor와 x descriptor를 동시에 하나의 렌더링할 후보 이미지에 적용할 순 없다.
my-img-small-480px.jpg 480w 1x ❌
my-img-small-480px.jpg 480w ⭕
my-img-small-480px.jpg 1x ⭕
📌 sizes
미디어 쿼리(Media Query)를 통해 w discriptor를 사용한 srcset 속성이 제공하는 렌더링할 후보 이미지들을 어떻게 사용할지에 대한 규칙을 정의
(뷰포트 너비에 따라 이미지가 어떤 사이즈로 보일 것인지를 명시)
- 미디어 쿼리(Media Query) - 마지막 목록에서는 생략이 가능
- 브라우저가 이미지의 표시 크기를 계산할 수 있어야 하므로, 화면 기준의 단위만 사용해야 한다.
📍 사용할 수 없는 단위들
- % 👉🏻 %는 부모 요소 기준이기 때문에 사용 불가능
- cm, mm, in, pt, pc 👉🏻 출력 장치나 프린터 같은 "물리적 단위"를 기준으로 하며, 화면 뷰포트와는 무관 => 브라우저가 정확하게 렌더링하기 어려움
📍 사용할 수 있는 단위들
- px 👉🏻 픽셀 단위 (화면에 직접 대응됨)
- vw 👉🏻 뷰포트 너비 기준 (%와 유사하지만 기준이 명확함)
- em, rem 👉🏻 CSS 문맥에서 사용 가능하지만 실무에선 거의 안 씀
<img srcset="
my-img-small-480px.jpg 480w,
my-img-medium-700px.jpg 700w,
my-img-large-1000px.jpg 1000w
"
sizes="
(max-width: 480px) 480px,
(max-width: 700px) 700px,
1000px
"
/>- (max-width: 480px) 480px 👉🏻 뷰포트가 480px 이하일 경우, 이미지가 480px로 표시될 것으로 가정하고 srcset에서 가장 적합한 이미지 선택. 여기에서는 my-img-small-480px.jpg가 렌더링된다.
- (max-width: 700px) 700px 👉🏻 뷰포트가 700px 이하일 경우 && 480px 초과일 경우, 이미지가 700px로 표시될 것으로 가정하고 srcset에서 가장 적합한 이미지 선택. 여기에서는 my-img-medium-700px.jpg가 렌더링된다.
- 1000px 👉🏻 위 조건을 모두 만족하지 않는 경우(=== 뷰포트가 701px 이상일 경우), 이미지가 1000px 너비로 보일 것이라고 가정. my-img-large-1000px.jpg가 렌더링된다.
🌟 조건과 상관없이 가장 근사치의 w descriptor의 값이 렌더링된다.
저는 잘 된 정리 자료들 중 적용하는 방법을 중점으로 요약만 했습니다.
꼭 원본 자료들 확인하시는 걸 추천드립니다!
참고 사이트
https://codingeverybody.kr/html-img-srcset-%EC%86%8D%EC%84%B1%EA%B3%BC-sizes-%EC%86%8D%EC%84%B1/
https://www.heropy.dev/p/5Gl8hX
https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset
https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes