CSS 이미지 스프라이트

여러 개의 작은 이미지들을 하나의 큰 이미지로 결합하여 사용하는 기술. 이렇게 결합된 하나의 큰 이미지를 CSS 스타일을 이용하여 필요한 부분만을 잘라내어 사용하는 방식

emoji sprite

/* 이미지 스프라이트 사용 */
.icon {
  background-image: url('https://example.com/images/icons-sprite.png');
  background-repeat: no-repeat;
  display: inline-block;
  width: 30px;
  height: 30px;
}
 
/* 아이콘1의 위치 지정 */
.icon.icon1 {
  background-position: 0 0;
}
 
/* 아이콘2의 위치 지정 */
.icon.icon2 {
  background-position: -30px 0;
}
 
/* 아이콘3의 위치 지정 */
.icon.icon3 {
  background-position: -60px 0;
}

<div class="icon icon1"></div>
<div class="icon icon2"></div>
<div class="icon icon3"></div>

장점

요청 수 최소화

웹 페이지에서 이미지를 로드할 때, 각 이미지마다 HTTP 요청이 발생한다. 하지만 이미지 스프라이트를 사용하면 하나의 큰 이미지를 로드하면 되므로 이미지마다 발생하는 HTTP 요청 수를 줄일 수 있게 된다.

로딩 속도 개선

이미지 스프라이트를 사용하면 하나의 큰 이미지를 다운로드하는 데에 걸리는 시간이 작은 이미지 여러 개를 다운로드하는 데에 걸리는 시간보다 훨씬 적어진다.

성능 향상

이미지 스프라이트를 사용하면 이미지를 로드한 후 해당 이미지를 자르기 위한 추가적인 계산이 필요하다. 하지만 이는 여러 개의 이미지를 각각 다운로드하는 것보다 성능적으로 더 효율적이다.

CSS Cascading CSS-in-JS