HTML `img` 태그 `srcset`과 `sizes` 속성 사용법

carbon (6).png

프론트엔드에서 img 태그 srcset과 sizes 속성에 대한 이해는 필수적입니다. 단순히 src 속성으로만 원본 이미지 파일을 불러오면 불필요한 로딩 시간으로 인해 사용자 경험을 해칠 위험이 크기 때문입니다.

그럼에도 제가 처음 배울 때에는 srcset 속성이 무엇을 의미하는지, sizes는 어떻게 작동하는지, 그리고 둘 사이 관계는 또 어떻게 이루어져 있는지 이해하기가 어려웠습니다. 공식 문서도 찾아보고 여러 블로그도 찾아봤는데 말이죠.

그래서 처음 srcset과 sizes 속성을 배우는 분들 입장에서 구체적인 예제를 활용해 쉽게 설명해보려고 합니다.

`srcset`과 `sizes` 속성을 이용하는 이유

일단 여러분이 srcset과 sizes 속성을 필요로 하는 경우는 간단합니다. 웹사이트에서 이미지를 가능한 한 빠르게 가져오고 싶을 때입니다. 특히 다양한 화면에서 대응해서 말이죠.

src 속성만 가지고 원본 이미지를 불러오면 보통은 이미지 로딩 속도가 느립니다. 불필요하게 말이죠. 여기서 불필요하다는 말은 원본 이미지 크기가 화면에 렌더링되는 영역보다 지나치게 크다는 말입니다.

예를 들어 너비가 640px인 렌더링 영역을 채우기 위해 너비가 1920px인 이미지를 불러오고 있다면 불필요한 다운로드 시간을 들이게 됩니다. 이용자는 그동안 빈 공간만 쳐다봐야 하고요. 결국 사용자 경험이 떨어집니다.

이상적으로 생각해 본다면 화면에 실제로 렌더링되는 영역에 딱 들어맞는 크기로 이미지를 가져오고 싶을 겁니다. 불러오는 이미지 크기가 렌더링 영역보다 더 크면 시간을 낭비하게 되지만 더 작으면 화질이 나빠지거든요.

만약 렌더링 영역 너비가 640px처럼 항상 고정되어 있다면 너비가 640px인 원본 이미지를 구해서 불러오면 그만입니다. 하지만 현실은 그렇지 않죠. 접속하는 기기에 따라 웹사이트 기본 너비가 달라지고 이미지 렌더링 영역 너비도 함께 달라집니다.

바로 이럴 때 srcset과 sizes 속성을 사용합니다. 다시 말해 "화면 너비가 640px 이하일 때는 640px짜리 이미지를 불러오고, 그것보다 클때는 1280px짜리 이미지를 가져와"라는 식으로 명령하기 위해서 말이죠.

`srcset` 개념과 사용법

srcset과 sizes를 처음부터 함께 고려하면 헤갈리니까 일단 srcset부터 이해합시다.

srcset은 단순하게 말해서 여러 가지 너비에 각각 대응되는 이미지 주소들을 지정하는 속성입니다.

우리가 "화면 너비가 640px 이하일 때는 640px짜리 이미지를 불러와"라고 명령하기 위해서는 어떤 이미지 주소가 640px짜리인지 먼저 알려주어야 하겠죠. 주소만 가지고서 이미지 크기 정보를 알 수는 없으니까요. srcset은 이렇게 작성합니다.

<img
  src="/car.png"
  srcset="/car_small.png 640w"
/>

이미지 주소 + 공백 + 너비 정보 형식입니다. /car_small.png는 이미지 주소를 가리키고, 640w는 화면 너비를 가리키죠. 화면 너비가 640px 이하일 때는 /car_small.png 이미지를 불러오라는 이야기와 같습니다.

여기서 너비값 640 뒤에 붙는 w는 화면 너비 단위를 나타내는 w(width) 디스크립터라고 합니다. w가 아니라 px를 사용할 수도 있었을 것 같지만 또 다른 x 디스크립터와 역할 차이를 강조하기 위해서 w를 사용한 것 같습니다. x 디스크립터는 비율을 나타내는 표현식인데 일단은 넘어갑시다.

srcset은 주소를 두 개 이상 가지고 있을 때 진가를 발휘합니다. 각각 주소는 쉼표로 구분합니다. 아래처럼 말이죠.

<img
  src="/car.png"
  srcset="/car_small.png 640w,
          /car_medium.png 1280w"
/>

이 img 태그는 화면 너비가 640px 이하일 때는 /car_small.png 파일을 가져오고, 화면 너비가 640px 초과 1280 이하일 때는 /car_medium.png 파일을 가져오라는 말과 같습니다. 참고로, 화면 너비가 1280을 초과할 때 브라우저는 그대로 /car_medium.png 파일을 가져옵니다.

여기서 왜 몇 px '이하'냐면, 화면 너비가 640px ~ 1280px 일 때 640px짜리 이미지를 가져오면 화질이 저하될 위험이 있기 때문입니다. 가령 화면 너비가 800px이라면 640px짜리 이미지보다 1280px짜리 이미지가 낫다는 거죠.

또 한 가지 짚고 넘어가야 할 점은, 640w이라는 값은 매칭된 /car_small.png 이미지 크기 정보와 아무런 관련이 없다는 사실입니다. /car_small.png 이미지가 가진 실제 너비는 100px일 수도, 1000px일 수도 있습니다. 640w이라는 값 때문에 불러올 때 이미지 너비가 640px로 변하거나 하는 마법도 없습니다.

실제 예를 들어 봅시다. 아래처럼 구현된 화면에서 각각 이미지를 렌더링 영역에 최적화하기 위해서는 어떻게 해야 할까요?

화면 캡처 2025-03-12 161809.png

아마 이렇게 해주면 될 겁니다.

<img
  src="/interior.png"
  srcset="/interior.png?w=200.png 640w,
          /interior.png?w=400.png 1280w,
          /interior.png?w=600 png 1920w"
/>

파일 주소에 붙은 ?w=200 쿼리 스트링은 이미지 파일이 가진 원래 너비를 나타낸다고 가정합시다.

위와 같은 화면에서 한 열에 이미지가 세 개 들어가니까 각각 이미지 렌더링 영역이 차지하는 너비는 전체 화면 너비의 1/3쯤 될 겁니다. 그래서 화면 너비가 640px일 때는 200px짜리 이미지를, 화면 너비가 1280px일 때는 400px짜리 이미지를, 화면 너비가 1920px일 때는 200px짜리 이미지를 가져오도록 만든 것입니다. 이미지 너비를 일일이 계산하기가 불편하지만 일단 그렇게 했습니다.

이때 한 가지 아쉬운 점이 있습니다. 위 사진과 같은 상황에서 화면 너비가 좁아짐에 따라 정렬 방식이 바뀐다면 어떨까요? 바로 아래 사진처럼 말입니다.

그리드 칼럼이 3개에서 2개로 줄어들면서 이미지가 차지하는 너비도 화면 너비의 1/2쯤으로 바뀌었습니다. 반응형 웹사이트를 개발한다면 흔히 접할 수 있는 디자인이죠.

하지만 srcset 속성은 여전히 1/3쯤 되는 이미지를 불러오라고 이야기하고 있습니다. 화면 너비가 변함에 따라 상황에 맞는 이미지를 불러오지 못하고 있는 상황입니다.

이런 상황에서는 화면 너비에 대응하여 불러와야 할 이미지를 지정하는 방법보다 이미지 렌더링 영역이 차지하는 너비에 대응하여 불러와야 할 이미지를 지정하는 방법이 유용하지 않을까요? 예를 들어 "이 이미지 렌더링 영역이 차지하는 너비가 500px이라면, 500px짜리 이미지를 불러와"라는 식으로 말입니다.

이때가 바로 sizes 속성이 필요한 경우입니다.

`sizes` 개념과 사용법

sizes는 간단히 말하자면 화면 너비 변화에 따라 각각 적용할 이미지 너비를 지정하는 속성입니다.

srcset에서 사용되는 w 디스크립터는 지금까지 화면 너비를 가리켰습니다. 그러나 sizes 속성을 입력하는 순간 w 디스크립터로 표현한 크기는 이미지 렌더링 영역 너비를 가리키게 됩니다. 구체적인 예를 들어 보죠.

<img
  src="/interior.png"
  srcset="/interior.png?w=200.png 640w,
          /interior.png?w=400.png 1280w,
          /interior.png?w=600 png 1920w"
  sizes="(max-width: 1280px) 1280px, 640px"
/>

sizes 문법은 media query 문법과 유사합니다. 그도 그럴 것이 둘 다 화면 크기가 변하는 상황을 위해 만들어진 문법이기 때문입니다.

위에서 sizes 속성이 나타내는 의미는 "화면 너비 1280px 이하일 때 렌더링 영역이 차지하는 너비는 1280px이고, 화면 너비가 1280px를 초과하면 렌더링 엉역이 차지하는 너비는 640px이다"라는 의미입니다. 실제로 sizes는 img 태그가 차지하는 렌더링 영역 너비를 지정하는 효과가 있습니다. width 속성이나 css가 있다면 sizes에 우선

그렇다면 화면 너비가 640px일 때 브라우저가 불러오는 이미지는 어느것일까요?

화면 너비가 640px일 때는 sizes 속성에 따라 렌더링 영역 너비가 1280px이 되고, srcset은 렌더링 영역 너비가 1280px이기 때문에 1280w에 대응하는 /interior.png?w=400 이미지 파일을 불러옵니다.

반면 화면 너비가 1280px일 때는 sizes 속성에 따라 렌더링 영역 너비가 640px이 되고, src셋은 렌더링 영역 너비가 640px이기 때문에 640w에 대응하는 /interior.png?w=200 이미지 파일을 불러오죠.

물론 실제로 위와 같이 코드를 쓰지는 않습니다. 속성의 원리와 적용 순서만 기억해 두세요.

그렇다면 원리를 이용해서 앞서 화면 너비가 좁아짐에 따라 그리드 칼럼이 3개에서 2개로 줄어드는 디자인에 대처해 봅시다. 그리드 칼럼 개수가 바뀌는 화면 너비의 breakpoint는 1280px로 가정하겠습니다.

<img
  src="/interior.png"
  srcset="/interior.png?w=320.png 320w,
          /interior.png?w=640.png 640w,
          /interior.png?w=960 png 960w"
  sizes="(max-width: 1280px) 50vw, 33vw"
/>

순서에 따라 sizes를 먼저 살펴봅시다. 보다시피 sizes는 px 말고도 vw나 mm 같은 단위도 사용할 수 있습니다. 이미지 렌더링 영역 너비만 나타낼 수 있으면 되죠.

주어진 sizes에 따르면 이 이미지가 차지하는 렌더링 영역 너비는 화면 너비가 1280px 이하일 때는 50vw 즉 화면의 절반, 화면 너비가 33vw일 때는 화면 너비의 약 1/3입니다.

이에 따라 만약 화면 너비가 640px일 때는 (이때 그리드 칼럼은 2개입니다) 렌더링 영역 너비는 320px이 되고 대응하는 이미지는 /interior.png?w=320입니다. 렌더링 영역이 320px인데 딱 맞는 320px짜리 이미지를 불러왔으니 최적화가 잘 됐네요.

다른 한편으로 화면 너비가 1920px일 때는 (이때 그리드 칼럼은 3개입니다) 렌더링 영역 너비는 약 640px이 되고 대응하는 이미지는 /interior.png?w=640입니다. 역시 최적화가 잘 됐습니다.