We wstępie wspomniałam o dużych portalach, przykładami mogą tu być takie giganty jak Youtube czy nasz polski Onet.
Wszystkie grafiki, przyciski, ikony jakie widzimy na Youtubie, są jednym plikiem:
http://s.ytimg.com/yt/img/master-vfl149944.png
Podobnie onet:
http://www.onet.pl/_d/d7c1a2f023463e6eb077f4cd1269216f,s_1_0.png
Skoro oni stosują tę metode, to musi być ona godna uwagi, nie sądzicie?

No dobra, może wyjaśnię dlaczego te strony korzystają z CSS Sprite i co to właściwie jest.
CSS Sprite to metoda łączenia wielu obrazków w jeden duży. Dzięki czemu ograniczana jest liczaba zapytań HTTP (im mniej zapytań http, tym szybciej wyświetlana jest strona), przykładowo, zamiast 30 zapytań (30 ikon na stronie) wysyłane jest jedno zapytanie (jeden obrazek ze wszystkimi ikonami).

Tak przygotowany obrazek wykorzystywany jest na stronie, przy pomocy atrybutu background-position, czyli poprzez odpowiednie przesuwanie tego obrazka, który ustawiany jest jako tło elementu.

Metoda ta jest jedak nieco uciążliwa, szczególnie dla tych, którzy zaczynają ją stosować (tutaj początkowy sceptycyzm jest zupełnie naturalny). Bardzo ważne jest odpowiednie przygotoanie takiej grafiki i precyzyjne ustawienie tła, poprzez odpowiednie przesunięcia.

Poniżej przykład kodu z wykorzystaniem tak przygotowanego obrazka.

Załóżmy, że w projekcie strony mamy graficzne menu, składające się z 4 pozycji, zamiast wycinać 4 oddzielne obrazki, wycinamy całe menu i zapisujemy do jednego pliku np. menu.jpg.

Kod html może wyglądać tak:

<ul class="menu">
  <li><a href="#" class="menu1"></a></li>
  <li><a href="#" class="menu2"></a></li>
  <li><a href="#" class="menu3"></a></li>
  <li><a href="#" class="menu4"></a></li>
</ul>

a css tak:

.menu li a{
 background: transparent url(menu.jpg) no-repeat left center;
 width:150px;
 height:40px;
}
.menu li a.menu1{
 background-position:0px 0px;
}
.menu li a.menu2{
 background-position:-150px 0px;
}
.menu li a.menu3{
 background-position:-300px 0px;
}
.menu li a.menu4{
 background-position:-450px 0px;
}

I tak w ten o to prosty sposób zamiast 4 rządań HTTP, wysłamy 1.