CSS sprites는 페이지의 첫 로딩 속도를 줄여주는 여러 방법중, 서버로의 요청 횟수를 최소화 하는 것은 최적화요소 중에서도 중요하며, 실제 적용하기에도 아주 손쉬운 방법중에 하나이다.

아이콘, 버튼같은 자주 쓰는 이미지들을 쓸 때마다 여러 이미지들을 불러오는 것이 아니라, 한 이미지파일로 통합한 후 배경이미지로 만들어 놓고 position(좌표)값으로 각각의 이미지를 불러오는 것이다.
이렇게 되면 장점은 트래픽이 절약되고HTTP요청 횟수를 줄어들어 빠른 웹 브라우징을 할 수 있다.

대표 포털 사이트를 살펴보자. 많은 이미지와 아이콘, 버튼들이 있겠지만 각각 한가지 이미지씩만 보길 바란다
네이버 스프라이트 기법 보기, 네이트 스프라이트 기법 보기, 다음 스프라이트 기법 보기

CSS에서 background로 이미지를 불러오고 거기서 background-position으로 불러오는데 예를 들어 살펴보자.

div#sprite { background:url(/images/sprite.png) no-repeat; } //한 이미지를 불러옴

//position으로 각 이미지를 불러옴
div#sprite > .first { background-position:0 0; }
div#sprite > .second { background-position:0 -15px; }
div#sprite > .third { background-position:0 -30px; }

이런식으로 할 수 있다.

이미지를 쉽게 할 수 있는 방법은 N-MET을 받아서 쉽게 할 수 있다.