FE
멀티미디어와 임베딩
반응형 이미지

반응형 이미지

Attributions and copyright licensing (opens in a new tab) by Mozilla Contributors (opens in a new tab) is licensed under CC-BY-SA 2.5 (opens in a new tab).

왜 사용할까요?

  • 좁은 화면에서 사이트를 볼 때 이미지의 중요한 세부 정보를 표시하는 이미지의 잘린 버전을 표시하는 것도 개선할 수 있습니다. 태블릿과 같은 중간 너비의 화면 장치에는 두 번째 잘린 이미지를 표시할 수 있습니다. 다양한 레이아웃에 대해 이러한 방식으로 서로 다른 자른 이미지를 제공하려는 일반적인 문제를 일반적으로 아트 디렉션 문제(art direction problem) 라고 합니다.
  • 모바일 화면에서 페이지를 보는 경우 페이지에 이렇게 큰 이미지를 삽입할 필요가 없습니다. 특히 모바일 사용자는 자신의 디바이스에 작은 이미지로 충분할 텐데 데스크톱 사용자용으로 큰 이미지를 다운로드하여 대역폭을 낭비하고 싶지 않을 것입니다. 반대로 작은 래스터 이미지 (en-US) (opens in a new tab)는 원래 크기보다 크게 표시되면 거칠게 보이기 시작합니다 (래스터 이미지는 벡터 그래픽 (opens in a new tab)에서 보았듯이 가로와 세로가 정해진 픽셀 수로 이루어진 이미지입니다). 이상적으로는 사용자의 웹 브라우저에서 여러 해상도를 사용할 수 있어야 합니다. 그러면 브라우저는 사용자 디바이스의 화면 크기에 따라 로드할 최적의 해상도를 결정할 수 있습니다. 이를 해상도 전환 문제(resolution wsitching problem) 라고 합니다.

벡터 이미지는 완전한 해결법은 아닙니다. 단순한 그래픽, 패턴, 인터페이스 요소 등에는 적합하지만 사진에서 볼 수 있는 디테일이 있는 벡터 기반 이미지를 만들려면 매우 복잡해집니다.

반응형 이미지 기술은 위에서 언급한 문제를 해결하기 위해 최근에 구현된 기술로, 동일한 내용을 표시하지만 픽셀 수가 다른 여러 이미지 파일을 브라우저에 제공하거나(해상도 전환), 공간 할당에 적합한 다른 이미지를 제공(아트 디렉션)할 수 있도록 합니다.

반응형 이미지를 어떻게 만드나요?

해상도 전환 : 다양한 크기

두 가지 속성(srcset (opens in a new tab) 및 sizes (opens in a new tab))을 사용하여 브라우저가 올바른 이미지를 선택하는 데 도움이 되는 힌트와 함께 여러 개의 추가 소스 이미지를 제공할 수 있습니다.

<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="elva-fairy-800w.jpg"
  alt="요정 옷을 입은 엘바" />

srcset

  • 이미지 파일 이름 (elva-fairy-480w.jpg.)
  • 공백
  • 이미지의 고유 픽셀 너비 (480w). 예상하는 것처럼 px 단위가 아닌 w 단위를 사용한다는 점에 유의하세요. 이미지의 고유 크기 (en-US) (opens in a new tab)는 컴퓨터에서 이미지 파일을 검사하여 확인할 수 있는 실제 크기입니다. 예를 들어 Mac의 경우 Finder에서 이미지를 선택한 다음 Cmd + I 를 눌러 정보 화면을 불러올 수 있습니다.

sizes

  • 미디어 조건 ((max-width:600px)). 이에 대한 자세한 내용은 CSS 주제 (opens in a new tab)에서 배우겠지만, 지금은 미디어 조건이 화면이 될 수 있는 가능한 상태를 설명한다고 가정해 보겠습니다. 이 경우 "뷰포트 너비가 600픽셀 이하일 때"라고 말합니다.
  • 공백
  • 미디어 조건이 참(480px)일 때 이미지가 채울 슬롯의 너비입니다.

참고: 슬롯 너비의 경우 절대 너비(예: 480px)를 제공하는 대신 뷰포트에 대한 상대 너비(예: 50vw)를 제공할 수 있지만 백분율은 제공하지 않습니다. 마지막 슬롯 너비에 미디어 조건이 없는 것을 보셨을 것입니다(미디어 조건이 모두 참일 때 선택되는 기본값입니다). 브라우저는 첫 번째 일치하는 조건 이후의 모든 것을 무시하므로 미디어 조건 순서에 주의해야 합니다.

따라서 이러한 속성을 설정하면 브라우저는 다음과 같이 작동합니다.

  • 기기 너비를 확인합니다.
  • sizes 목록에서 어떤 미디어 조건이 가장 먼저 참인지 알아냅니다.
  • 해당 미디어 쿼리에 지정된 슬롯 크기를 확인합니다.
  • 슬롯과 크기가 같은 srcset 목록에 참조된 이미지 또는 이미지가 없는 경우 선택한 슬롯 크기보다 큰 첫 번째 이미지를 로드합니다.

이제 끝입니다! 이 시점에서 뷰포트 너비가 480px인 지원 브라우저가 페이지를 로드하면 (max-width: 600px) 미디어 조건이 참이 되므로 브라우저는 480px 슬롯을 선택합니다. 고유의 너비(480w)가 슬롯 크기에 가장 가깝기 때문에 elva-fairy-480w.jpg가 로드됩니다. 800px 사진은 디스크에서 128KB인 반면 480px 버전은 63KB에 불과하므로 65KB를 절약할 수 있습니다. 이제 이 페이지에 많은 사진이 있다고 상상해 보세요. 이 기술을 사용하면 모바일 사용자의 대역폭을 크게 절약할 수 있습니다.

🦋 데스크톱 브라우저에서 테스트할 때 창 너비를 가장 좁게 설정했는데도 브라우저에서 더 좁은 이미지를 로드하지 못하면 뷰포트의 크기를 살펴보세요. 브라우저의 JavaScript 콘솔로 이동하여 document.querySelector('html').clientWidth를 입력하면 대략적인 크기를 알 수 있습니다. 브라우저마다 창 너비를 줄일 수 있는 최소 크기가 있으며, 생각보다 더 넓을 수도 있습니다. 모바일 브라우저로 테스트할 때는 Firefox의 about:debugging 페이지와 같은 도구를 사용하여 데스크톱 개발자 도구를 사용하여 모바일에 로드된 페이지를 검사할 수 있습니다.
어떤 이미지가 로드되었는지 확인하려면 Firefox 개발자 도구의 네트워크 모니터 (opens in a new tab) 탭 또는 Chrome 개발자 도구의 네트워크 (opens in a new tab) 패널을 사용하면 됩니다. Chrome의 경우 캐시를 비활성화 (opens in a new tab)하여 이미 다운로드한 이미지를 선택하지 못하도록 할 수도 있습니다.

이러한 기능을 지원하지 않는 구형 브라우저는 이를 무시합니다. 대신 해당 브라우저는 src (opens in a new tab) 속성에 참조된 이미지를 정상적으로 로드합니다.

🦋 위에 링크된 예제의 <head> (opens in a new tab)에 <meta name="viewport" content="width=device-width">라는 줄이 있는데, 이는 모바일 브라우저가 웹 페이지를 로드할 때 실제 뷰포트 너비를 적용하도록 합니다. 일부 모바일 브라우저는 뷰포트 너비를 속이고 더 큰 뷰포트 너비로 페이지를 로드한 다음 로드한 페이지를 축소하므로 반응형 이미지나 디자인에 도움이 되지 않습니다.

해상도 전환 : 동일한 크기, 다른 해상도

모두 동일한 사이즈의 화면이라면 브라우저는 디스플레이의 해상도를 파악하여 srcset에서 가장 적합한 이미지를 제공합니다.

아트 디렉션

다양한 이미지 디스플레이 크기에 맞게 표시되는 이미지를 변경하려는 경우입니다.

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg" />
  <source media="(min-width: 800px)" srcset="elva-800w.jpg" />
  <img src="elva-800w.jpg" alt="딸 엘바를 안고 서 있는 크리스" />
</picture>
  • <source> 요소에는 미디어 조건이 포함된 media 속성이 포함되어 있습니다. 첫 번째 srcset 예제와 마찬가지로 이러한 조건은 표시할 이미지를 결정하는 테스트이며, 참을 반환하는 첫 번째 이미지가 표시됩니다. 이 경우 뷰포트 너비가 799px 이하인 경우 첫 번째 <source> 요소의 이미지가 표시됩니다. 뷰포트 너비가 800px 이상이면 두 번째 이미지가 표시됩니다.
  • srcset 속성에는 표시할 이미지의 경로가 포함됩니다. 위의 <img>에서 살펴본 것처럼, <source>는 여러 이미지가 참조된 srcset 속성과 sizes 속성을 사용할 수 있습니다. 따라서 <picture> 요소를 통해 여러 이미지를 제공하면서 각 이미지의 해상도도 여러 개 제공할 수 있습니다. 현실적으로 이런 종류의 작업을 자주 수행하지는 않을 것입니다.
  • 모든 경우에 </picture> 바로 앞에 src 및 alt와 함께 <img> 요소를 제공해야 하며, 그렇지 않으면 이미지가 표시되지 않습니다. 이는 미디어 조건 중 어느 것도 참을 반환하지 않을 때 적용되는 기본 사례와 <picture> 요소를 지원하지 않는 브라우저를 위한 폴백을 제공합니다. 이 예제에서는 실제로 두 번째 <source> 요소를 제거할 수 있습니다.

CSS나 JavaScript를 왜 사용하지 않나요?

브라우저가 페이지 로드를 시작하면 기본 구문 분석기가 페이지의 CSS와 JavaScript를 로드하고 해석하기 전에 이미지를 다운로드(사전 로드)하기 시작합니다. 이 메커니즘은 일반적으로 페이지 로드 시간을 단축하는 데 유용하지만 반응형 이미지에는 도움이 되지 않으므로 srcset과 같은 솔루션을 구현해야 합니다. 예를 들어, <img> (opens in a new tab) 요소를 로드한 다음 JavaScript를 사용하여 뷰포트 너비를 감지한 다음 원하는 경우 소스 이미지를 더 작은 이미지로 동적으로 변경할 수 없습니다. 그러면 원본 이미지가 이미 로드되어 작은 이미지도 함께 로드되므로 반응형 이미지 측면에서 더욱 좋지 않습니다.

웹에 벡터 그래픽 추가하기