image-set 속성으로 반응형 background-image 사용하기

image-set 속성을 사용해서 아래와 같이 브라우저 및 디바이스마다 다른 이미지를 적용하는 방법에 대해 알 수 있습니다.

1. srcset

image-set 속성에 대해서 소개해 드리기 전에 기존에 자주 사용하는 srcset 대해서 간략히 설명하고 넘어가도록 하겠습니다.

코드 작성을 하다 보면 아래와 같이 이미지를 사용하는 경우가 많이 있는데요.

<img src="./img/large-landscape_2048x1365.jpeg" width="2048" height="1365" alt="" />

img {
  max-width: 100%;
  height: auto;
}

코드를 위와 같이 작성하면 브라우저에서 아래와 같이 보입니다.

고해상도의 이미지를 사용하는 것은 큰 브라우저에서는 의미가 있지만 아래처럼 핸드폰 화면에서도 엄청나게 큰 사이즈의 이미지 파일을 보여주는 것은 낭비가 됩니다.

핸드폰 화면같이 작은 경우에서는 상대적으로 작은 이미지를 보여주더라도 문제가 없습니다.

사용 방법

이러한 개념으로 나오게 된 srcset은 아래와 같이 사용하고 있습니다. w(너비)가 750 이하인 경우에는 작은 사진을 보여주도록 작성한 코드입니다.

<img
  src="./img/large-landscape_2048x1365.jpeg"
  srcset="./img/small-landscape_799x533.jpeg 750w, ./img/large-landscape_2048x1365.jpeg 2048w"
  width="2048"
  height="1536"
  alt=""
/>

결과

잘 동작하는지는 브라우저에서 확인해 보겠습니다.

너비에 따라서 명시한 이미지 소스대로 보이는 것을 볼 수 있습니다.

여기서는 확인을 위해서 small, large에 서로 비율이 다른 이미지를 사용했지만,
srcset 속성은 비율이 같고 다양한 사이즈의 크기를 갖는 이미지들을 사용하고 싶을 때 적합한 속성이고 만약 비율이 다른 이미지를 사용하고 싶다면 @media 미디어쿼리를 사용하는 것이 적합합니다.

추가로, 크롬 브라우저에서 테스트 시 아래 gif처럼 브라우저 사이즈 조건을 만족하는 상황에서 새로고침을 해도 srcset이 적용이 안되는 경우가 있는데요.

이것은 크롬브라우저의 이미지 캐시에 의해서 발생하는 이슈로 개발자도구 옵션의 Network 탭에서 'Disable cache' 를 활성화해주면 정상적으로 동작하는 것을 확인하실 수 있습니다.

2. image-set

image-set 속성은 srcset 속성과 같은 목적이고 사용법도 거의 동일합니다.
다만 img태그에 사용하는지 background-image에 사용하는지에 따라 다를 뿐 입니다.

사용방법

As-is

.box {
  background-image: url("./img/large-landscape_2048x1365.jpeg");
}

To-be

.box {
  background-image: image-set(
    url("./img/large-landscape_2048x1365.jpeg") 1x,
    url("./img/small-landscape_799x533.jpeg") 2x
  );
}

크롬 브라우저에서는 -webkit- prefix를 붙혀야 정상 동작합니다.

.box {
  background-image: -webkit-image-set(
    url("./img/large-landscape_2048x1365.jpeg") 1x,
    url("./img/small-landscape_799x533.jpeg") 2x
  );
  background-image: image-set(
    url("./img/large-landscape_2048x1365.jpeg") 1x,
    url("./img/small-landscape_799x533.jpeg") 2x
  );
}

결과

브라우저에서 테스트해보면 아래 gif처럼 PC인 경우에 large이미지가 MW인 경우에는 small 이미지가 적용되는 것을 보실 수 있습니다.

모바일 기기에서도 small 이미지가 정상적으로 적용됩니다.

지원범위

IE는 지원하지 않고 다른 최신 브라우저에서도 완벽히 동작하지는 않기 때문에 사용에 제약은 있을 것으로 보입니다.
image-set은 srcset과 달리 'x' 단위만 사용 가능하고 'w', 'h' 단위는 지원 예정입니다. MDN

마치며

작업할 때 보통 기획에 따라서 img를 사용할지 background-image를 사용할지 결정이 되는 경우가 많은데요.
img 요소 속성들과 background-image의 값들이 기능적으로 공통되는 부분이 많아지면 UI개발을 함에 있어서 작업 방식을 선택할 때 보다 수월해지지 않을까 하는 생각이 들었습니다.