[TIL] 반응형 이미지

박먼지·2023년 9월 21일

CSS html 반응형

반응형 이미지

반응형 이미지란

화면 크기, 해상도 및 기타 기능이 여러 디바이스에서 잘 작동하는 이미지를 말한다.

이미지 출처
https://tenor.com/view/responsive-web-design-gif-13156874

반응형 이미지가 필요한 이유

넓은 화면에서 볼 땐 괜찮았던 이미지가 좁은 화면에서는 이미지가 작아져서 확인하기 힘든 경우가 있다.

이럴 때 이미지의 중요한 부분만 잘라서 제공하고 싶을 때 사용하는 것이 아트 디렉션이다.

아트 디렉션은 다양한 레이아웃에 대해 서로 다른 자른 이미지를 제공하려고 하는 것을 말한다.

또한, 모바일 화면인 경우 큰 이미지를 삽입할 필요가 없고,(대역폭 낭비) 작은 이미지의 경우 원래 크기보다 크게 표시되면 깨지는 경우가 있다.

벡터 이미지(svg)가 이런 문제를 어느 정도 해결할 수 있지만, 사진과 같이 세부 묘사가 포함된 경우 벡터 기반 이미지를 만드는 것은 매우 복잡하다. 벡터 이미지는 단순한 그래픽, 패턴, 인터페이스 요소 등에 적합하지 복잡한 이미지를 표현하는데 적절하지 않다.

이럴 때 화면 크기에 따라 동일한 이미지를 다른 사이즈 별로 제공할 수 있는데, 이를 해상도 전환이라고 한다.

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

이미지 비율 맞추기

background-size와 object-fit속성을 사용하여 이미지를 조절할 수 있다.

background-size는 배경 이미지가 있는 요소에 작동하는 속성이며 <img>태그에서는 작동하지 않는다.

이 때 사용할 수 있는 속성이 object-fit이다.

키워드 종류

contain: 요소의 크기에 맞게 크기가 조정되고, 비율은 고정된 상태를 말한다.
cover: 요소의 크기에 맞게 크기가 조정되며 가득 채울때까지 확대된다.
fill: 기본값, 요소의 크기에 맞게 꽉 채워준다. 이미지의 비율이 안맞는 경우가 생길 수 있다.

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

srcset 속성에 x 디스크립터를 사용하면 동일한 크기의 이미지를 여러 해상도로 지원할 수 있다.

<img
  srcset="elva-fairy-320w.jpg, 
          elva-fairy-480w.jpg 1.5x,
          elva-fairy-640w.jpg 2x"
  src="elva-fairy-640w.jpg"
  alt="요정 옷을 입은 엘바" />

디스플레이 해상도가 각 CSS 픽셀당 디바이스 픽셀이 1개인 경우(저해상도) elva-fairy-320w.jpg 이미지가 로드되고, 디스플레이 해상도가 CSS 픽셀 당 디바이스 픽셀이 2개 이상인 경우(고해상도) elva-fairy-640w.jpg(2x)이미지가 로드된다.

x설명자는 디스플레이 픽셀 밀도라는 한 가지에만 적응될 수 있다.

반응형 이미지는 화질 뿐만 아니라 레이아웃에 따라 크기가 달라지는 경우가 있기 때문에 두 가지 사항을 기반으로 반응형 이미지를 구현해야 한다.

따라서 x 설명자는 유용하지만 반응형 이미지로 잘 사용하지 않는다.

이것이 다음에 나올 w설명자와 sizes속성이 필요한 이유이다.(이는 웹에서 반응형 이미지 사용량의 약 85%를 차지한다.)

해상도 전환: 다양한 크기

해상도 전환으로 장치에 따라 동일한 이미지를 더 크거나 더 작게 표시할 수 있다.

<img>태그에 srcset및 sizes 속성을 사용하여 브라우저에 여러 추가 이미지를 제공할 수 있다.

<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)
이미지의 고유 픽셀 너비(480vw)
이미지의 고유 크기는 컴퓨터에서 이미지 파일을 검사하여 확인할 수 있는 실제 크기를 말한다.

sizes는 일련의 미디어 조건(예:화면 너비)을 정의하고 특정 미디어 조건에 해당할 때 어떤 이미지 크기를 선택하는 것이 가장 좋을지 알려준다.

미디어 조건((max-width:600px))
"뷰포트 너비가 600픽셀 이하일 때"
미디어 조건이 참일 때 이미지가 채울 슬롯의 너비(480px)

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

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

즉, 뷰포트 너비가 480px인 브라우저가 페이지를 로드하면 (max-width:600px)이 참이 되므로 브라우저는 480px슬롯을 선택한다.
elva-fairy-480w.jpg가 선택된 슬롯 크기에 가장 가깝기 때문에 로드된다.

800px 사진은 디스크에서 128KB인 반면 480px 버전은 63KB에 불과하므로 65KB나 절약할 수 있다!

아트 디렉션

아트 디렉션 문제는 다양한 디스플레이 크기에 맞게 표시되는 이미지를 변경하는 경우(이미지를 자르는 경우)를 말한다.

<picture>요소를 사용하여 구현할 수 있다.

<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>

아트 디렉션은 다른 유용한 기능을 제공한다.

자동화된 반응형 이미지

반응형 이미지를 지원하는 소프트웨어

CSS나 자바스크립트를 사용하면 안되는 이유?

브라우저가 페이지를 로드할 때 CSS와 JavaScript를 로드하고 해석하기 전에 이미지를 다운로드 한다. <img>요소를 로드한 다음 Javascript로 뷰포트 너비를 감지한 다음 원하는 경우 이미지를 동적으로 변경할 수 없다. 그러면 원본 이미지와 작은 이미지가 함께 로드되므로 반응형 이미지 측면에서 좋지 않다.

요약

성능 향상이 목표라면 <img>,srcset을 사용하고, 디자인 제어가 필요하다면 <picture>을 사용하자.

전자의 경우 큰 화면에는 큰 이미지를 보여주고, 작은 화면에서는 작은 이미지를 보여줌으로써 바이트를 절약하기 때문에 비용 절감 효과가 있다.

후자의 경우 화면 크기와 레이아웃의 차이에 따라 이미지를 다르게 잘라서 제공함으로써 다양한 이미지를 제공할 수 있다.

참조
https://developer.mozilla.org/ko/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/#aa-increased-performance