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:
CSS Sprites 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:
Paginacja slidera
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ęciaNarzędzie przesunięcia Photoshop(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)
Tworzenie CSS Sprites
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 plasterkiNarzędzie cięcia na plasterki Photoshop(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.
CSS Sprites Edycja opcji plasterka
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:

CSS:

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:

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:

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:
Ikony w CSS i HTML
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:

a elementy na stronie tak:
CSS background-position Sprite
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 plasterkiSlice Tool Photoshop(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.
Odczytywanie pozycji z obrazka CSS Sprites
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:

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:

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:

a elementy na stronie, zgodnie z projektem tak:
Gotowy CSS i HTML

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:

Zalety:

  • mniejsza ilość zapytań do serwera
  • szybszy czas ładowania się strony
  • brak nieprzyjemnych efektów „doładowywania się” obrazków

Wady:

  • czasochłonność
  • utrudniona edycja w przypadku zmiany jednego obrazka

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.

  • Świetny artykuł! :-) Oby więcej takich :)

  • Dzięki wielkie za artykuł, na pewno będę korzystał z CSS Sprites! :)

  • Art dobry, ale obok metody łopatologicznej można było podać kilka linków do generatorów online. Najlepsze z nich działają na zasadzie wczytaj obrazek, zaznacz sprajty, sciągnij wygenerowany css.

  • Oczywiście zgadzam się i miałem to na uwadze, jak kilka innych pomysłów, jednak odniosłem wrażenie, że artykuł będzie zbyt długi.

    A może to dlatego, że nie jestem zwolennikiem generatorów :P

    ps. do tematu CSS Sprites postaram się jeszcze powrócić (być może nie jeden raz) przy okazji omawiania LESS, SASS i Compass, który w dość prosty sposób pozwala takowe generować.

    W każdym razie, dziękuję za komentarze ;)

  • Czegoś takiego szukałem:P

  • Jeszcze do końca nie przeczytałem bo nie miałem czasu natomiast już widzę super temat. Dziękuję!

  • No to już przerobiłem artykuł więc czas na recenzję. Super opisane, wcześniej nie zwróciłem uwagi na sprajty a teraz zacznę ich używać przede wszystkim jako podkładki do social ikonek. Natomiast, przerabiałem kurs Pana Grzegorza xhtml i css i tam on tłumaczył to jako zastosowanie do menu na naszą stronę. Artykuł super, oby więcej takich o sztuczkach CSS. Pozdrawiam!

  • CSS Sprites ma niezliczoną liczbę zastosowań, w tym również (i swego czasu najbardziej popularne) jako elementy menu/nawigacji. W internecie jest wiele stron, które korzystają z tej metody, np. znana chyba wszystkim apple.com, której górne menu powstało z takiego sprajtu: http://images.apple.com/global/nav/images/globalnav.png, lecz jest również sporo witryn, na których wciąż obserwujemy wspomniany, nieprzyjemny efekt doładowywania się obrazków, np. dolne menu na helion.pl.

    Uważam, że zapewnienie ‚płynnych’ wrażeń użytkownikowi, to sprawa kluczowa.

    Pozdrawiam

  • artykuł dla mnie wciąż amatorsko projektującej coś tam b.ciekawy, bo nie wiedziałam o takiej metodzie odchudzania strony
    ale jakoś na razie nie pojęłam jak pociąć tę grafikę, muszę doczytać o tym
    pozdrówka:)

    • Sprajty to bardzo dobra, przy tym prosta metoda uzyskania ciekawego efektu „przejścia” z obrazków. Zalety to niewątpliwie szybkość i prostota zaprojektowania. Uważam, że ludzie bez znajomości (js, biblioteki jquery) mogą stworzyć bardzo ciekawe efekty. Kluczem jest tu ustawianie pozycji podmiany obrazka. Z photoshopem stworzenie „sprajtów” to przyjemna, prosta sprawa :)

  • Już sama obecność sprite w (na krzywe oko) dobrych 90% gotowych skryptów .js takich jak slajdery czy galerie zdjęć daje sporo do myślenia.
    Co do czasochłonności no to niestety prawda, ale każdy mały ukłon w stronę optymalizacji daje suma sumarum ogromne efekty doceniane po czasie (a często „po fakcie”).

  • Sprites’y zdecydowanie przyśpieszają ładowanie stron. Szczególnie w bardziej skomplikowanych graficznie witrynach.
    Minusem są modyfikacje. Zamiast podmieniać pojedynczy plik trzeba grzebać w spritsach.

  • Ostatnio analizując źródło pewnej strony zastanawiałem się po co im te sprajty (mniej więcej wiedziałem jak to działa), a tu proszę dość elastyczne i co najważniejsze mam jeden plik a nie dziesiątki plików z ikonkami.
    Piotrze oby więcej takich poradników.

  • Pingback: Zrozumieć pseudo-elementy :before i :after()

  • Dodałbym do wad, że zabiera nam możliwość ustawienia mniejszej grafiki w większym elemencie – czyli podstawowej pierwotnej funkcjonalności background-position.

    Ale oczywiście do elementów, których wymiary == wymiarze ikonki/grafiki jest to jak najbardziej dobra technika.

  • Nie wiedziałem o tej technice i ten artykuł bardzo mi się teraz przyda. Robię bloga o ogrzewaniu, kotły gazowe itp. i właśnie z czasem ładowania witryny miałem problemy.

  • Nike byłem do końca przekonany ale skoro onet i facebook tego używają to ja też muszę ;)

  • Pingback: Narzędzia do optymalizacji i kompresji obrazów()

  • Dla windowsiarzy polecam to narzędzie:

    http://collamo.jp/?page_id=95
    i
    to: http://www.jonathanrowny.com/journal/sprite-hero-yet-another-css-sprite-generator

    Tontuu jest bardziej automatyczny, a ten drugi ma nieco więcej opcji?

    Oba przetestowałem i są bardzo dobre.

  • Pingback: 5 sposobów, jak usprawnić stronę www na urządzeniach mobilnych - OSOM STUDIO()

  • Pingback: 5 sposobów, jak usprawnić stronę www na urządzeniach mobilnych | OSOM STUDIO()