Przyspiesz swoją stronę z CSS Sprites!

Zapewne wiele razy spotkałeś się z terminem, jakże głośnym od kilku lat, jakim jest optymalizacja stron internetowych. Z jednej strony kilka pozornie prostych reguł, z drugiej jednak temat rzeka. W dzisiejszym poradniku chciałbym poruszyć jeden z wielu aspektów przyspieszania witryny, jakim jest technika zwana CSS Sprites.

Na wstępie warto zaznaczyć, że nie jest to technika nowa, gdyż istnieje już od wielu lat i według mnie jej znajomość jest obowiązkiem każdego dobrego webdesignera. Dlaczego zatem artykuł na ten temat? Odpowiedź jest prosta. Z moich obserwacji wynika, że wciąż niewiele osób stosuje tę metodę, czy to z braku jej znajomości, czy z braku przekonania o jej zaletach lub po prostu z czystego lenistwa.
Moim celem będzie krótkie omówienie czym właściwie jest CSS Sprites, jakie ma zalety i wady oraz pokazanie jak w odpowiedni sposób ciąć i przygotowywać obrazy w programie Adobe Photoshop i jak omawianą technikę wdrożyć w życie za pomocą HTML i CSS.

Czym właściwie jest CSS Sprites?

Kilka linijek wyżej wspomniałem o przygotowywaniu obrazów… no właśnie, obrazów! CSS Sprites to technika pozwalająca na łączenie wielu mniejszych obrazów, wykorzystywanych na stronie www, w jeden większy plik, który przy odpowiedniej pomocy styli CSS pozwoli zaoszczędzić nam pasmo serwera oraz czas ładowania się strony, a także zapobiegnie nieprzyjemnym efektom „doładowywania” się brakujących grafik.

Mówiąc językiem zrozumiałym dla twórców stron internetowych, sprawa wygląda prosto. Załóżmy, że na stronie mamy 20 obrazków, które służą nam za logo witryny, ikonki czy przyciski. Obrazki przypisywane są do elementów za pomocą CSS, jako ich tła. Łączna waga tych obrazków, to powiedzmy 250kb. Kluczowy moment następuje w chwili, gdy użytkownik odwiedza naszą stronę. Przeglądarka pobiera wówczas kod HTML oraz pliki ze stylami CSS, a także wysyła żądania do serwera, w których prosi o przesłanie wszystkich dodatkowych elementów, jakie zdeklarowane zostały w kodzie. W naszym przypadku będą to obrazy. Przy 20 obrazkach, serwer musi obsłużyć aż 20 żądań, by strona wyglądała poprawnie. A co gdyby wystarczyło obsłużyć jedno żądanie i pobrać plik zajmujący np. 200kb? Jak sądzisz, czy to nie byłoby prostsze i mniej męczące?

Masz rację! I tutaj z pomocą przychodzi nam właśnie technika CSS Sprites, dzięki której umieścimy wszystkie 20 obrazków na jednym, zmniejszając nie tylko ich wagę, ale i ilość zapytań wysyłanych do serwera, w tym przypadku aż o 19. Niewątpliwą zaletą jest również fakt, że przeglądarka zapamięta pobrany obraz w pamięci cache, dzięki czemu kolejne podstrony korzystające z niego będą ładowały się znacznie szybciej. Podobnie jest z elementami domyślnie ukrytymi, które pokazujemy np. za pomocą jQuery po kliknięciu jakiegoś przycisku. Element taki od razu będzie wyglądał tak, jak w zamierzeniu twórcy, podczas gdy przy standardowym przypisaniu mu osobnej grafiki, obserwowalibyśmy nieprzyjemny dla oka moment ładowania się tegoż obrazka.

Aby zobrazować Ci to, o czym mówię, pozwolę sobie przytoczyć „sprajty” używane na stronach, które większość z nas odwiedza codziennie:

Facebook i Onet:

to jeden z wielu spritów społecznościowego giganta, w którym na jednym obrazku umieszczonych zostało ponad 30 małych grafik. Możesz sobie tylko wyobrazić jak wiele serwerowego pasma oszczędza w ten sposób Facebook każdego dnia, przy tak ogromnym ruchu. Obrazek zapisany jest w PNG24 z przezroczystym tłem, które na potrzeby tego artykułu zamieniłem na ciemne. Jak widać na obrazku tuż obok, również portal Onet nie odstaje pod względem optymalizacji, a sami dobrze wiemy, jak wiele podstron tematycznych posiada, co w rezultacie przekłada się na setki różnego rodzaju drobnych grafik i obrazków.

Takich przykładów można by wymieniać setki. Popularność metody CSS Sprites świadczy całkowicie na jej korzyść. Nadszedł zatem czas, aby nauczyć się jak jej używać.

Tworzenie spritów w Adobe Photoshop

Dosyć teorii, czas na praktyczne zastosowania tej metody z pomocą programu Adobe Photoshop. Na początek utworzymy prosty sprite, złożony z dwóch małych obrazków, a będzie to dokładnie bardzo popularny element paginacji sliderów, które często przychodzi nam dostosowywać do własnych potrzeb. Gotowy produkt będzie wyglądał następująco:

A zatem 4 punkty, a wśród nich jeden symbolizujący aktualny slajd. By ostylować paginację, będziemy potrzebować dwóch obrazków, które zamienimy w jeden. Najpierw za pomocą narzędzia przesunięcia(v) z zaznaczoną opcją Auto zaznaczanie wybierzemy nasz aktywny element, a następnie przesuniemy go tuż nad jeden z pozostałych punktów. Polecam oczywiście spore przybliżenie widoku (CTRL+). Elementy powinny być ułożone tak, aby dolna krawędź jednego stykała się z górną krawędzią drugiego oraz by były rozłożone równo w poziomie (patrz zrzut ekranu poniżej)

Nie pozostaje nam zatem nic innego jak wyciąć przygotowany obrazek i użyć go do ostylowania elementów paginacji w CSS. Do tego celu użyjemy narzędzia cięcia na plasterki(c), którym wykonamy zaznaczenie jak poniżej, następnie klikając prawym przyciskiem myszy na stworzony plasterek przejdziemy do Edycja opcji plasterka i wpiszemy jego nazwę (w tym przypadku „bullet”) oraz klikniemy OK.

Teraz wystarczy już tylko wyłączyć widoczność pozostałych warstw, gdyż chcemy aby obrazek zapisał się z przezroczystym tłem oraz zapisać sprite przy pomocy polecenia Plik->Zapisz dla internetu i urządzeń, ustawiając jako format PNG24 z zaznaczoną opcją przezroczystości.

„background-position” czyli magia CSS

Kiedy już mamy odpowiednio przygotowany obrazek, nadszedł czas, aby umieścić go na stronie wykorzystując style CSS. Dla jasności zamieszczam kod HTML naszej prostej paginacji oraz gotowe style, które wyjaśnię poniżej:

HTML:

	
1
	
2
	
3
	
4

CSS:

ul.pagination {
	display: inline-block;
	*display: inline;
	padding: 12px 30px;
	border-radius: 8px;
	-webkit-box-shadow: 0 0 5px #4d4d4d;
	box-shadow: 0 0 5px #4d4d4d;
	zoom: 1;
	background-color: #3B3B3B;
}

ul.pagination li {
	width: 15px;
	height: 15px;
	margin: 0 8px 0 0;
	float: left;
	cursor: pointer;
	text-indent: -9999px;
	background: url(images/bullets.png) 0 -15px no-repeat;
}

ul.pagination li:last-child {
	margin: 0;
}

Nie będę się zagłębiał w każdą właściwość CSS, gdyż zakładam, że znasz podstawy tego języka. Omówię natomiast to, co związane bezpośrednio z opisywaną techniką, lecz wcześniej słowo wyjaśnienia odnośnie gwiazdki występującej przy właściwości display. Otóż *display: inline w połączeniu z zoom: 1, jest popularnym trickiem dla starego Internet Explorera, który nie obsługuje właściwości display: inline-block. Potraktuj to jako ciekawostkę, gdyż w tym tutorialu nie ma to większego znaczenia.

Wracając jednak do meritum, przyjrzyj się stylom dla elementu li, width i height ustawione na 15px, bo takich właśnie rozmiarów jest nasza „kropka” w paginacji. text-indent z ujemną wartością, aby pozbyć się tekstu, a w tym przypadku numeracji, która często jest przez skrypt dodawana do jej elementów. I teraz najważniejsze, właściwość background, w której do elementów li przypisujemy jako tło, utworzony przez nas obrazek oraz kluczowy zapis 0 -15px, który widzisz zaraz za deklaracją obrazu tła. W tej chwili mówimy przeglądarce, aby obrazek „bullet.png” przewinęła 15px w dół, dla zwykłych elementów li. Gdybyśmy pominęli ten zapis lub użyli wartości 0 0, nasze elementy li byłyby domyślnie różowe, gdyż korzystałyby z górnej części obrazka. Nie trudno się zatem domyślić, że pierwszy parametr (w tym przypadku 0) odpowiedzialny jest za przesunięcie poziome, natomiast drugi – pionowe. Powyższy zapis skróconej właściwości background jest równoznaczny z poniższym:

background-image: url(images/bullet.png);
background-position: 0 -15px;
background-repeat: no-repeat;

Zatem do prawidłowego ustawienia pozycji tła dla elementu aktywnego (klasa „current”) użyjemy właściwości background-position, w następujący sposób:

ul.pagination li.current {
	background-position: 0 0;
}

ustawiając pozycję na górny lewy róg (0 0).
W tym momencie mamy już gotową paginację, wykorzystującą jeden obrazek tła, zamiast dwóch, które moglibyśmy przypisać osobno.

Ustalanie pozycji grafik na stworzonym sprite

Wiemy już jak tworzyć sprity, lecz pozostała wciąż istotna kwestia, jak odczytać pozycje poszczególnych grafik na stworzonym obrazku. Przyjrzyjmy się następującemu zestawowi, proste logo i kilka ikonek społecznościowych w dwóch stanach, zwykłym oraz po najechaniu kursorem myszy:

O ile z grafiką loga nie będzie problemów, gdyż zaczyna się w lewym górnym rogu (background-position: 0 0), to przy ikonkach musimy się na chwilę zatrzymać. W tym momencie nasz kod CSS wygląda następująco:

#logo {
	width: 280px;
	height: 80px;
	margin: 0 0 25px 0;
	background: url(images/sprite.png) 0 0 no-repeat;
}

.fb, .tw, .yt, .in {
	width: 42px;
	height: 42px;
	margin: 0 10px 0 0;
	float: left;
	background: url(images/sprite.png) no-repeat;
}

a elementy na stronie tak:

Widać zatem, że ikonki są wyświetlane, jednak ich tło stanowi obecnie część loga, gdyż domyślne ustawienie background-position wynosi 0 0. Pora zatem dowiedzieć się, jak odczytać pozycje poszczególnych ikonek z obrazka.

Do tego celu również wykorzystamy Photoshopa. Przy otwartym obrazku ze spritem przejdziemy ponownie do narzędzia cięcia na plasterki(c) i zaznaczymy pierwszą z ikon (stan nieaktywny – szara), a następnie klikniemy prawym przyciskiem myszy i wybierzemy Edycja opcji plasterka. Okienko, które właśnie się pojawiło, jest kluczem do rozwiązania zagadki. W sekcji Wymiary widzimy zarówno wymiary utworzonego plasterka jak i jego odsunięcie poziome (X) oraz pionowe (Y) względem krawędzi obrazka.

Jak zapewne się domyślasz, dla ikonki facebooka wystarczy odsunąć tło w pionie o 86px, a wartość odsunięcia poziomego ustawić na 0. Zatem uaktualniony kod będzie wyglądał następująco:

#logo {
	width: 280px;
	height: 80px;
	margin: 0 0 25px 0;
	background: url(images/sprite.png) 0 0 no-repeat;
}

.fb, .tw, .yt, .in {
	width: 42px;
	height: 42px;
	margin: 0 10px 0 0;
	float: left;
	background: url(images/sprite.png) no-repeat;
}

.fb {
	background-position: 0 -86px;
}

Dla ikonki twittera wartości wynoszą X: 52, Y: 86, a więc podobnie, posługując się ujemnymi wartościami ustawimy dla niej tło:

.tw {
	background-position: -52px -86px;
}

Kiedy mamy już ustawione wartości background-position dla wszystkich elementów, czas by zadbać o efekt najechania myszy (:hover) dla naszych ikonek. Nic prostszego! Mając pozycję „nieaktywnych” elementów, wystarczy, że dla każdego z nich obniżymy ją o wartość wysokości ikonki, czyli 42px (86 + 42 = 128). Finalny kod wygląda następująco:

#logo {
	width: 280px;
	height: 80px;
	margin: 0 0 25px 0;
	background: url(images/sprite.png) 0 0 no-repeat;
}

.fb, .tw, .yt, .in {
	width: 42px;
	height: 42px;
	margin: 0 10px 0 0;
	float: left;
	background: url(images/sprite.png) no-repeat;
}

.fb {
	background-position: 0 -86px;
}

.fb:hover {
	background-position: 0 -128px;
}

.tw {
	background-position: -52px -86px;
}

.tw:hover {
	background-position: -52px -128px;
}

.yt {
	background-position: -104px -86px;
}

.yt:hover {
	background-position: -104px -128px;
}

.in {
	background-position: -156px -86px;
}

.in:hover {
	background-position: -156px -128px;
}

a elementy na stronie, zgodnie z projektem tak:

Podsumowanie

Mam nadzieję, że tym poradnikiem rozjaśniłem temat CSS Sprites osobom, które nie miały wcześniej z nim do czynienia. Jak widzisz, tworzenie spritów nie jest rzeczą trudną, ale na pewno czasochłonną i wymagającą precyzji. Z własnego doświadczenia powiem, że kodując stronę wycinam po kolei wszystkie potrzebne mi obrazki i podstawiam je jako tła w CSS osobno dla każdego elementu. Na koniec jednak, gdy już wszystko wygląda poprawnie, zbieram wstawione wcześniej obrazki i układam je w Photoshopie w sprite, następnie dla wszystkich elementów ustawiam jako tło jeden obrazek (np. sprite.png) i odczytując wartości metodą pokazaną nieco wyżej, ustawiam odpowiednie przesunięcia w background-position.

Na koniec, jak obiecałem, wymienię jeszcze zalety i wady opisywanej techniki:

Jak zatem widzisz, istotną wadą jest przede wszystkim utrudniona edycja, gdy chcemy podmienić np. jeden obrazek na inny, dlatego zawsze zapisuj przygotowane sprity jako pliki .psd, by później móc do nich wrócić, gdy przyjdzie taka potrzeba.

Jeśli do tej pory nie korzystałeś z tej techniki, szczerze polecam jej użycie już w kolejnym projekcie, a tymczasem zachęcam do wyrażania własnych opinii, doświadczeń i przemyśleń w komentarzach pod wpisem.