CSS Sprite – Ulga dla łącza.

Jeśli nie wiesz co zrobić żeby Twoja strona internetowa się szybciej ładowała jesteś w dobrym miejscu ponieważ sam aktualnie updateuje Owlspot i mogę się podzielić kilkoma ciekawymi wskazówkami.

Jest wiele technik które przyspieszą ładowanie naszej strony m.in. dobrze napisany kod, zmiana serwera, umiarkowana ilość javascript, usunięcie dużych flashowych reklam itd.  Wszystkie te triki napewno mogą zredukować ilość niepotrzebnie przesyłanych kilobajtów ale jest jeszcze jedna rzecz o której czasem webmasterzy zapominają – Sprity CSS.

Nazwa sprite zawsze kojarzyła mi się ze starymi PC’towymi grami (Wolfenstein 3d, Duke Nukem3d etc.) gdzie postacie i wszystkie przedmioty były zwykłymi bitampami, a kiedy np. hitlerowiec z Wolfeinstein sie odwracał jego postać była zastępowana przez inną statyczną bitmape itd…. generalnie komputery z tamtych lat były za słabe żeby wyrenderować większą ilość poligonów niż sciany, sufit i ewentualnie schody – sprity  nie miały nic wspólnego ze światem 3d.

To w końcu o co chodzi z tymi Spritami?

Dzieki stosowaniu spritów można zredukować ilość żądań HTTP dla grafiki i zwiększyć szybkość ładowania się innych elementów strony.

Omówie to na prostym przykładzie z mojej strony. Kiedy projektowałem formularz do dodawania komentrzy pomyślalem sobie że fajnie by było jakby przycisk SUBMIT / WYŚLIJ był w kształcie chmurki z niebieskim napisem do której podłącze pseudoklase :hover która będzie podmieniać mi na chmurke z pomarańczowym napisem. Bardzo małe plik – zaledewie kilka kilobajtów ale to juz wystarczy żeby po najechaniu kursorem na przycisk chmurka znikała na 2/3 sekundy poczym pojawiała się jej wersja hover.
Moim zdaniem takie chwilowe zniknięcie chmurki wygląda bardzo nieprofesjonalnie i oto przychodzą nam z pomocą sprity.

Jak z nich korzystać?

Po pierwsze trzeba przygotować odpowiedni plik graficzny który łączy w sobie różne grafiki. W moim przypadku będzie to zwykły button ale żeby wykorzystać w pełni Sprity można zapisać wszystkie fragmenty strony w jednym pliku PNG i odwoływać się w css do zdefiniowanych współrzędnych X i Y tego pliku. Prawda że Spritne? ;)

Tak wygląda mój button:

A tak wygląda kod CSS:

#submit{
	background: url('images/form_submit_sprite.png');
	background-position: 0px 0px;
	height: 48px;
	width: 78px;
	cursor:  pointer;
}
#submit:hover{
	background: url('images/form_submit_sprite.png');
	background-position: 0px -50px;	
}

Jak widać powyżej to jest dokłądnie ten sam plik ale pokazawany na przemian jego inny fragment. Dzięki temu że umieściłem werjse hover -50px niżej mogłem ten fragment przywołać przez background-position: 0px -50px;

Kilka przykładów: