Pozycjonowanie, programowanie, usability, optymalizacja i semantyka Wszystko to składa się na sukces strony WWW!
Jesteś tutaj: Strona główna » Sztuczki CSS » CSS Sprites
CSS Sprites Dodany: 02-01-2010 @ 13:17:28 | Komentarzy: 16
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.
Komentarze
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 ;]
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 (?)
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.
Polecam http://csssprites.com/ do generowania sprites na szybko :)
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ń.
@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 :)
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
@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.
Tą samą sztuczkę stosuje samo wielkie Google: http://www.google.pl/images/nav_logo7.png
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 :/
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.
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.
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ę.
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
@up, link się nie dodał:
http://blog.vokiel.com/css-sprites-laczenie-wielu-obrazkow-w-jeden-redukcja-zadan-http
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.