27 Programowanie 4 minuty czytania

CSS Sprites

I nie chodzi tutaj o popularny napój do picia, tylko o optymalizację strony. Tak, tak :). Jest to specjalna technika, dzięki której możemy sprawić, aby nasza strona szybciej się ładowała. W przypadku serwisów o większym ruchu, każdy bajt zużytego transferu będzie na wagę złota.

Czym jest CSS Sprites?

Z języka angielskiego Sprite oznacza: skrzat, krasnoludek. CSS Sprites to technika wykorzystywana przez frontendowców, którą często się stosuje aby zoptymalizować daną stronę. Główną ideą jest przyspieszenie ładowania się strony oraz zmniejszenie zapytań HTTP. Każde pobranie pliku (elementu) na stronie np. obrazek, plik JS czy CSS to oddzielne zapytanie. Jeżeli mamy tego dużo, to serwis wgrywa się trochę.

Wszystko powinno stać się jasne, gdy przyjrzymy się badaniom frontendowców z Yahoo!, którzy zbadali czas ładowania się stron największych portali. Z badania dowiadujemy się jednej, bardzo ważnej rzeczy. Ładowanie się samego kodu HTML, to tylko 10-20% całego czasu ładowania się strony. Reszta to obrazki, style, javascript i inne. Zobaczcie obrazek poniżej:

Każdy z Was może sobie przeprowadzić takie badanie. Wystarczy dodatek do FireFoxa: FireBug, dzięki któremu możemy analizować to, co dzieje się na stronie. Szczególnie monitorować połączenia sieciowe – HTTP. Nawet na Onecie 90% to obrazki :).

Rozwiązanie

Cała sztuczka polega na tym, aby większość obrazków upchnąć do jednego obrazka i wykorzystywać je w postaci teł, do których dobieramy się poprzez artybut css – background-position. Jeżeli dalej nie wiadomo o co chodzi to rzućcie okiem na te obrazki: master onetu i master youtube. Jak widać, loga, tła oraz ikonki zostały osadzone w jednym pliku. Dzięki temu, zamiast pobierać X obrazków pobieramy TYLKO jeden.

Tą sztuczkę, również stosuje się do różnych hoverów, czyli akcji na najechanie myszki na dany element HTML.

W praktyce wygląda to tak:

#element { background: url(/images/master-bg.png) 0 0 no-repeat; }
#logo { background: url(/images/master-bg.png) 0 -100px no-repeat; }
#bg { background: url(/images/master-bg.png) 0 -200px no-repeat; }
#link_home:hover { background: url(/images/master-bg.png) 0 -300px no-repeat; }

Na odpowiednich wysokościach (100, 200, 300) znajdują się grafiki.

Jeżeli chcecie dowiedzieć się więcej o tym, to polecam lekturę na A List Apart, CSS Tricks i Smashing Magazine.



Raz w miesiącu e-mail z najlepszymi artykułami

Zdjęcie autora wpisu - Piotr Cichosz

Piotr Cichosz — autor wpisu

Frontend developer. Tworzę zaawansowane systemy webowe w JS. Swoją wiedzę nt. SEO wykorzystuję do rozwijania własnych projektów (z lepszym lub gorszym efektem). Dużo eksperymentuję i staram się określić jak bardzo można nagiąć cierpliwość algorytmów Google (:.

Zobacz podobne wpisy

Komentarze 27

author Jurgi www 02.01.2010 18:37:57

Zacna technika, ale najpierw należałoby wybatożyć „webmajstrów” u których ikonka 50×50 pikseli waży 150 KB. Poważnie, dziś widziałem, takie cuda tworzy gościu oferujący się jako profesjonalista.

author Ender www 02.01.2010 19:15:37

Kurde, miałem o tym pisać właśnie ;P

Tym bardziej, że napisałbym praktycznie to samo - opierając się o kupioną niedawno książkę, 'optymalizacja stron www' jednego z programistów Yahoo ;]

author Paweł Rabinek www 02.01.2010 19:29:19

Dobra technika, stosowałem to zawsze w hoverach ale widać, że nadaje się także do innych grafik. Ciekawe tylko czy nie wpływa to na wydajną pracę przeglądarki jeśli takich elementów jest bardzo dużo (?)

author uranik www 02.01.2010 20:25:59

Jak każde rozwiązanie - także to ma swoje plusy i minusy. Plusy zostały opisane, minusami są: - brak możliwości zastosowania tła powtarzalnego, zapisanego w grafice w tej technologii - brak możliwości optymalizacji jakościowej grafiki każdego elementu (np. dla zdjęcia chcę mieć jpeg 60%, a dla ikonki - gifa, natomiast do przezroczystego elementu - png).
Myślę jednak, że można znaleźć złoty środek - stosować technikę sprite'ów, ale używając kilku grafik, np. grafikę jpg dla dużych elementów, gif dla ikonek itp.

author Marek www 02.01.2010 21:08:03

Polecam http://csssprites.com/ do generowania sprites na szybko :)

author Mich@ł www 02.01.2010 21:13:27

Całkiem ciekawe rozwiązanie na optymalizacje kodu tylko czy jest sens ;)? Przy obecnych łączach raczej przeciętny internauta nie odczuje zbytnio różnicy podczas przeglądania strony.

No chyba że się mylę to mnie poprawcie ;)

No ale trzeba będzie poczytać. Jak widziałem Google również korzysta z tego typu rozwiązań.

author shpyo www 02.01.2010 21:18:49

@Paweł Rabinek - nie wpływa. Obrazek jest wczytywany raz do pamięci podręcznej przeglądarki.
@uranik - jeśli chodzi o tła, to można bez problemu powtarzać po X. Nie popadajmy w jakieś skrajne przypadki :). W sprite'ach umieszcza się raczej stałe obrazki i kategoryzuje się je (w miarę możliwości). Jeden sprite z ikonkami, drugi z hoverami itp.
@Marek - zapomniałem o generatorach sprite'ów - dzięki za linka.
@Michał - nie chodzi tutaj o łącze, tylko o moce przerobowe serwera. Po co go zarzynać? :) Zrozumiesz jak będziesz miał do czynienia z potężnym ruchem :)

author tyswidzial 02.01.2010 22:46:35

problemem jest raczej to, że przy pobieraniu każdego elementu strony na nowo musi być nawiązywane połączenie z serwerem http (oczywiście jeśli nie jest użyty keep alive, który nie zawsze może być zastosowany). stąd stosuje się właśnie tego typu techniki jak css sprites, scalanie plików css w jeden czy łączenie plików js.

a odnośnie powtarzalności tła, to można również powtarzać po Y, trzeba jednak wtedy inaczej rozlokować elementy. no i nigdy nie mozna po X i Y z jednego pliku

author tomwys www 03.01.2010 12:25:01

@tyswidzial - nie chodzi tylko o połączenia. Równie ważne są same requesty. Nawet keep alive nie załatwia sprawy, bo nadal trzeba wysłać pakiet z requestem i serwer musi zareagować (oczywiście jest to lepsze niż całe połączenie). Ponadto jest limit na liczbę jednocześnie wykonywanych requestów.

author Cezary Lech www 04.01.2010 04:39:00

Tą samą sztuczkę stosuje samo wielkie Google: http://www.google.pl/images/nav_logo7.png

author Lexy www 04.01.2010 12:41:12

Gorzej jak komuś ta technika przypadnie do gustu na tyle, aby ładować w jednym obrazku dosłownie wszystko, nawet wykresy czy obrazki, które powinny zostać wstawione za pomocą tradycyjnego img src z altami :/

author Darek Grund www 13.01.2010 11:39:57

Sztuczka bardzo dobra, ale niestety pracochłonna - dlatego wykonuję ją tylko na wyraźne życzenie klienta, który wie wtedy za co płaci. Największa zaleta to szybkość ładowania grafik i znacznie mniejsze obciążenie serwera. A w przypadku takich serwisów jak google czy yahoo każdy bajt ma ogromne znaczenie. Kolejna fajna sprawa - wszystkie grafiki w obrębie jednego sprite'a pojawiają się jednocześnie - nie ma efektu że grafika pojawia się stopniowo, że kawałeczek tutaj, potem kawałeczek tam.

author Moher www 25.01.2010 19:04:16

Dlaczego pracochłonna? Jest już kilka generatorów.

Przygotowanie tego i ustawienie w css'ie zajęło kilkanaście minut.

http://cache.katalok.pl/img/sprite2.png
http://cache.katalok.pl/img/sprite.png

Zaoszczędziłem kilkadziesiąt odwołań do serwera, transfer itp. Strona ładuje się szybciej, ludzie chętniej przeglądają. Każdy wygrywa. Gra warta świeczki.

Trzeba przyznać ,że zabawa z wtyczkami YSlow i Googlowskim PageSpeed jest bardzo wciągająca.

author Websta www 07.02.2010 01:27:04

Do hoverów wiadomo sprawa niezbędna, bo może się okazać, że nagle link znika na sekundę lub dwie. Moim zdaniem największym problemem tej techniki, jest moment cięcia projektu i pisania styli. Trudno się połapać, który background ma jakie współrzędne. Chyba najlepszym rozwiązaniem, szczególnie w zawiłych projektach jest zrobienie sprites na koniec, po zakodowaniu layouta. Używając tej techniki trzeba bezwzględnie pamiętać o nadawaniu koloru tła (oczywiście tam gdzie występuje), żeby elementy były widoczne zanim wczyta się obrazek.

Aplikacji pomocnych jest masa, ostatnio testuję http://spriteme.org/ jako skryptozakładkę.

author CSS Sprites 22.02.2010 21:35:51

Widziałem podobny artykuł, z tym, że z opisem na konkretnym przykładzie. Polecam, pokazuje w praktyce jak to się stosuje, mnie bardzo pomogło:
CSS Sprites - łączenie wielu obrazków w jeden redukcją żądań HTTP | Vokiel.com

author CSS Sprites 22.02.2010 21:36:39

@up, link się nie dodał:
http://blog.vokiel.com/css-sprites-laczenie-wielu-obrazkow-w-jeden-redukcja-zadan-http

author ukashm www 15.12.2010 11:31:07

no tak wszystko ok, nakład pracy trochę większy przy css przy większych serwisach i dużym ruchu pomocna opcja. Tylko czy tworzenie w html zwykłych linków tekstowych, i wyrzucanie ich w css np. text-indentem w kosmos na -9999 jest dobre optymalizacyjnie i eleganckie inżynieryjnie:)

author ukashm www 15.12.2010 11:31:07

no tak wszystko ok, nakład pracy trochę większy przy css przy większych serwisach i dużym ruchu pomocna opcja. Tylko czy tworzenie w html zwykłych linków tekstowych, i wyrzucanie ich w css np. text-indentem w kosmos na -9999 jest dobre optymalizacyjnie i eleganckie inżynieryjnie:)

author BlackPig www 18.01.2011 18:08:01

Wydaje mi się, że jeszcze większe znaczenie niż wielkość obrazka ma liczba zapytań HTTP. Mieliśmy ostatnio z kumplem sytuację w 1 sklepie na magento, gdzie serwer dedyk się kompletnie zamulił - w ogóle nie odpowiadał przez kilka godzin, bo przez kilka godzin uzbierał kilkanaście tys wejść, ale z analizy kumpla (bo ja to jestem zielony z administracji) wyszło, że jedynym powodem była liczba zapytań HTTP (tam był projekt przejęty po innej firmie i dużo doróbek). W sumie z jednego wejścia na stronę główną (gdzie nic nie ma) mamy 39 żądań, a pewnie mogło by być

author boroova 13.05.2011 11:43:45

Dziekuje bardzo za ciekawy artykul. Strona mojej zony ma ogromne problemy z wczytywaniem i na wolniejszych laczach potrafi to zajac dobrych kilkanascie sekund. Wg Google PageSpeed to wlasnie obrazki powoduje u niej najwieksze spowolnienie.

Sprobuje zrobic podobnie jak Google czy Youtube z przyciskami i tlami i sprawdze czy jest duza roznica.

A jesli serwis jest postawiony na Joomli, to czy bedzie widac duza roznice predkosci?

author GRAL 29.11.2011 14:20:49

Ta strona wykorzystuje sprite'a i szybko się otwiera.
http://www.pelnegry24.pl zobaczcie i przetestujcie

author almakot 15.12.2011 01:46:18

Nigdy nie chciało mi się bawić w te klocki... ale generator to już wygodna sprawa. W końcu i tak jadę z wszystkim z paluszka, więc co mi tam. Zobaczę jakie będą efekty - tym razem dziękuję za inspiracje.

author Krystian www 30.12.2011 18:45:42

Poruszyłeś bardzo ważną kwestie. Ponoć szybkość ładowania strony jest jednym z czynników wpływających na ustalanie SERP'ów - co prawda jeden z 200, ale zawsze to jeden krok do przodu. Muszę powiedzieć, że ostatnio bawiłem się trochę FireBug'iem i po dostosowaniu się do jego wskazówek strona rzeczywiście szybciej się ładuje - co dobre dla użytkownika strony jest dobre i dla Google ;-)

author Piotrek www 15.01.2012 10:32:17

A ja jestem amatorem i jeżeli jest możliwość wytłumaczenia tego nieco inaczej.... rozumiem, że to zmniejsza transfer itp ale mając taki obraz jak ta grafika wczytuje się odpowiednio na stronę, że nie powstają jakieś krzaki albo coś innego? ^^

author tom 24.02.2012 19:20:28

Świetny i przydatny artykuł. w forach SMF jest to wykorzystywane właśnie zawsze.

author Easy_Rider www 14.08.2012 16:22:17

sprite generator: http://pl.spritegen.website-performance.org/

author INGRID 13.04.2013 01:29:24

No to teraz trzeba połączyć wszystkie maluchy i kombinować z CSS :)

Dodaj komentarz