HTML 강좌 / 반응형 이미지: srcset, sizes, picture

HTML 반응형 이미지는 같은 사진의 여러 크기나 구도를 브라우저에 제시해 화면 조건에 맞는 파일을 선택하도록 하는 방법입니다. 같은 구도의 해상도 선택에는 srcset과 sizes, 화면에 따라 다른 구도를 보여 줄 때는 picture를 사용합니다.

예제 이미지 준비하기

아래 예제는 같은 사진을 가로 480·960·1600픽셀로 만든 파일과, 가운데 나무가 잘 보이도록 정사각형으로 자른 파일을 사용합니다. 파일을 내려받아 HTML 파일과 같은 폴더에 두면 코드의 상대경로를 그대로 시험할 수 있습니다.

• 가로 480픽셀 이미지
• 가로 960픽셀 이미지
• 가로 1600픽셀 이미지
• 800×800픽셀 정사각형 이미지

처음 세 파일은 같은 장면과 가로세로 비율을 유지하며 크기만 다릅니다. 정사각형 파일은 좁은 화면에서 중심 피사체를 더 크게 보여 주기 위한 다른 구도입니다.

srcset과 sizes로 파일 크기 선택하기

srcset의 480w, 960w, 1600w는 각 파일의 실제 가로 픽셀 수입니다. sizes는 화면 조건별로 이미지가 레이아웃에서 차지할 예상 너비를 알려 줍니다.

<img class="example-fluid"
  src="html-image-sample-lake-tree-960-v1.webp"
  srcset="html-image-sample-lake-tree-480-v1.webp 480w,
          html-image-sample-lake-tree-960-v1.webp 960w,
          html-image-sample-lake-tree-1600-v1.webp 1600w"
  sizes="(max-width: 800px) 100vw, 800px"
  alt="호수 가운데 작은 섬의 나무와 먼 산"
  width="1600" height="900">

이 예제는 화면 너비가 800픽셀 이하일 때 이미지가 대략 화면 너비를 차지하고, 그보다 넓을 때는 최대 800픽셀을 차지한다고 가정합니다. 실제 CSS가 다르다면 sizes도 그 레이아웃에 맞게 수정해야 합니다. src는 srcset을 지원하지 않는 환경을 위한 기본 파일입니다.

.example-fluid {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
}

이 CSS는 example-fluid 클래스가 있는 첫 번째 예제에만 적용됩니다. 브라우저는 표시 너비뿐 아니라 화면의 픽셀 밀도, 확대 비율 등의 조건도 고려해 후보 중 하나를 선택합니다. 따라서 작은 화면에서 항상 480픽셀 파일이 선택되는 것은 아닙니다. sizes의 값은 CSS 픽셀 단위의 표시 너비이지, 내려받을 파일의 픽셀 수가 아닙니다.

고정된 표시 너비에는 배율 표기 사용하기

이미지가 항상 480 CSS 픽셀 너비로 보인다면 1x와 2x처럼 픽셀 밀도를 기준으로 한 후보를 줄 수도 있습니다. 이 경우 sizes는 사용하지 않습니다.

<img class="example-fixed"
  src="html-image-sample-lake-tree-480-v1.webp"
  srcset="html-image-sample-lake-tree-480-v1.webp 1x,
          html-image-sample-lake-tree-960-v1.webp 2x"
  alt="호수 가운데 작은 섬의 나무와 먼 산"
  width="480" height="270">

.example-fixed {
  display: block;
  width: 480px;
  height: auto;
}

첫 번째 예제의 CSS는 이 이미지에 적용되지 않습니다. 위 CSS는 표시 너비를 480픽셀로 고정하므로, 그보다 좁은 영역에서는 이미지가 넘칠 수 있습니다. 화면에 표시될 너비가 바뀌어야 한다면 앞의 w와 sizes 예제를 사용하세요. 한 srcset 안에서 w 표기와 x 표기를 섞지 않습니다.

picture로 좁은 화면의 구도 바꾸기

파일의 크기만 바꾸는 것과 달리, picture는 화면 조건에 맞는 다른 구도의 이미지를 보여 줄 수 있습니다. 다음 코드는 화면 너비가 600픽셀 이하일 때 정사각형 이미지를, 그 밖에는 가로형 이미지를 사용합니다.

<picture>
  <source media="(max-width: 600px)"
          srcset="html-image-sample-lake-tree-square-800-v1.webp"
          width="800" height="800">
  <img src="html-image-sample-lake-tree-960-v1.webp"
       alt="호수 가운데 작은 섬의 나무와 먼 산"
       width="960" height="540">
</picture>

위 사진은 좁은 화면에서 사용할 정사각형 파일의 예시이며, 이 문단의 사진 자체가 화면 너비에 따라 바뀌는 것은 아닙니다. picture 안에는 대체 이미지와 대체 텍스트를 제공하는 img가 반드시 있어야 합니다. source는 선택 조건과 후보 파일을 제공하며, 본문을 설명하는 alt는 img에 둡니다.

브라우저에서 선택된 이미지 확인하기

이미지 파일 네 개를 파일명 그대로 index.html과 같은 폴더에 저장하세요. 위 HTML 예제는 body 안에, 해당 CSS는 head의 style 요소나 별도 스타일시트에 넣습니다. 모바일 화면에서 실제 뷰포트 너비를 기준으로 시험하려면 head에 <meta name="viewport" content="width=device-width, initial-scale=1">도 넣으세요.

1. index.html을 브라우저에서 열고 개발자 도구의 Network 패널을 엽니다.
2. 창 너비를 바꾼 뒤 캐시를 사용하지 않도록 설정하고 페이지를 새로고침합니다. 이미지 요청의 파일명을 보면 어떤 후보가 로드됐는지 알 수 있습니다.
3. picture 예제는 뷰포트 너비를 600픽셀 이하와 초과로 각각 설정해 새로고침합니다. 좁을 때 정사각형 파일, 넓을 때 가로형 파일이 선택되는지 확인합니다.

콘솔에서 아래 값을 확인할 수도 있습니다. currentSrc는 브라우저가 현재 선택한 이미지 URL을 보여 줍니다. 첫 번째 명령은 srcset 예제, 두 번째 명령은 picture 예제에 해당합니다.

document.querySelector('.example-fluid').currentSrc
document.querySelector('picture img').currentSrc

같은 화면 너비라도 픽셀 밀도나 확대 비율에 따라 srcset에서 선택되는 파일이 달라질 수 있습니다. 이미 큰 파일을 받은 상태라면 창 너비만 줄여도 곧바로 작은 파일로 바뀌지 않을 수 있으므로, 조건을 바꾼 뒤 캐시를 끄고 새로고침해 비교하세요.

반응형 이미지가 맞지 않을 때 확인하기

• w 값이 파일의 실제 가로 픽셀 수와 일치하는지 확인합니다.
• sizes가 CSS에서 실제로 표시되는 너비를 적절히 설명하는지 확인합니다.
• 크기별 파일이 같은 구도인지, 구도를 바꾸는 파일은 picture에 분리했는지 확인합니다.
• picture 안에 img와 의미에 맞는 alt가 있는지 확인합니다.

선택 규칙의 세부 내용은 MDN의 반응형 이미지 안내와 WHATWG HTML 이미지 표준에서 확인할 수 있습니다.