웹 페이지의 첫 로딩 속도를 줄여주는 여러 방법 중, 서버로의 요청 횟수를 최소화 하는 것은 웹 애플리케이션의 최적화 요소 중에서도 중요한 덕목이자 실제 적용하기에도 아주 손쉬운 방법이다.
보통 웹 페이지에서 치장을 목적으로 사용되는 백그라운드 이미지들은 많이 사용될수록, 자동으로 그 요청 횟수도 늘어나기 마련인데, 이를 줄이고자 하는 목적으로 쓰이는 기법으로 CSS Sprites 기법이 있다.

간단하게, 아이콘이나 버튼과 같은 반복돼서 표시되지 않는 그림들처럼 독립된 여러 그림을 하나의 그림으로 합쳐놓고 CSS의 background-position을 보일 요소에 따라 바꾸어서 표시하는 기법인데, 이렇게 하면 서버로의 요청 횟수를 줄여주면서 사이트 로딩 속도를 줄여주고 더불어서 내려받는 이미지의 크기까지 줄여줄 수 있는 부수적 효과를 얻을 수 있다.

이곳의 블로그에서도 오른쪽 옆구리 아래에 붙어있는 표딱지 그림들의 경우, 개별 이미지를 사용해서 웹 페이지에 표시하려면 모두 10번의 서버 요청이 필요한데, CSS Sprites 기법을 써서 왼쪽에 보이는 바와 같은 하나의 그림으로 모든 단추의 배경 그림들을 표시할 수 있었다.

실제 구현 방법은 아주 간단해서, unordered li들로 구성된 메뉴들의 각 li에 특정 id 값을 지정해 주고 a 태그 속에 있는 text node를 <span> 태그로 감싸고 난 후, 여기에 background image의 좌표값을 표시될 해당 위치에 맞게 지정해 주면 모든 작업이 끝난다.
한 가지 주의가 필요했던 것은 text 때문에 배경 그림이 일부 가려지는 것을 막기 위해, <span>에 적용한 CSS의 padding-left 값을 li의 너비만큼 주어서, 결과적으로 글자를 화면 바깥으로 밀어내어 표시되지 못하도록 하였다. 이렇게 해서, 마지막 CSS 적용 결과는 다음과 같다.

/* sidebar badges */
div#sidebar div#badges ul li {
  list-style-type: none;
  list-style-image: none;
  background-image: none;
  width: 80px;
  height: 15px;
  margin-bottom: 4px;
  overflow: hidden;
}
 
div#badges span {
  display: block;
  background-image: url(images/buttons-bg.png);
  background-repeat: no-repeat;
  padding-left: 80px;
  cursor: pointer;
}
 
div#badges #atom span {background-position: 0 0;}
div#badges #vxhtml span {background-position: 0 -15px;}
div#badges #vcss span {background-position: 0 -30px;}
div#badges #wcag span {background-position: 0 -45px;}
div#badges #uni span {background-position: 0 -60px;}
div#badges #cc span {background-position: 0 -75px;}
div#badges #mac span {background-position: 0 -90px;}
div#badges #safari span {background-position: 0 -105px;}
div#badges #firefox span {background-position: 0 -120px;}
div#badges #ichat span {background-position: 0 -135px;}

결과적으로, 서버 요청 횟수를 10번에서 하나로 줄였을 뿐만 아니라, 이미지의 전체 크기도 거의 1/5이나 줄어든 일거양득의 효과를 보여준다. 🙂

이렇게 눈에 띄는 장점이 있기 때문에, 여러 웹 페이지에서는 CSS Sprites 기법을 많이 사용하고 있는데, 일일이 그래픽 프로그램에서 여러 개의 그림을 하나의 이미지로 합치고 CSS 적용을 위한 그림의 좌표값을 얻기란 번거로울 수가 있다. 그래서, 이런 작업을 자동화해주는 도구들이 개발돼서 한둘씩 생겨나고 있는데, 대표적으로 Website Performance | CSS Sprite Generator가 있다. 이곳에서는 이미지들을 하나로 묶은 압축 파일(zip)을 올려놓으면 약간의 설정만으로 Sprite 이미지와 함께 CSS 적용 rule까지 한꺼번에 얻을 수 있어서 편하다.

아무쪼록, 이러한 기법이 널리 알려지고 많이 쓰였으면 한다.

관련된 주제의 글

• 웹페이지 로딩 후, 필요할 때에만 특정 JavaScript 파일을 읽어 들이는 방법 (2)
• 웹 페이지 최적화 정도의 등급을 매기는 도구인 YSlow가 공개되다 (0)
• 웹 최적화 관련 흥미를 끄는 문구 (0)
• 느긋하게 비동기식으로 JavaScript를 웹 문서에 추가하는 방법 (11)
• WordPress Caching plugin을 Hyper Cache로 교체 (1)