CSS Sprites

CSS Sprites

Sprites (ang. duszki) – nie są niczym nowym. Możliwe, że już o nich słyszałeś(aś). W czasach kiedy komputery nie radziły sobie z grafiką trójwymiarową były bardzo powszechne. Wykorzystywano je do tworzenia grafiki dwuwymiarowej. Idea jest prosta. Na jednym obrazku znajduję się wiele obiektów (w różnych stanach), które są wyświetlane w zależności od potrzeb.

sprite

Okazuje się że ta technika jeszcze długo nie umrze. Nam może pomóc w optymalizacji witryny po stronie przeglądarki internetowej. Posiadanie wielu małych obrazków nie jest do końca idealnym rozwiązaniem. Wyobraź sobie że otrzymanie – przetworzenie samego kodu html stanowi tylko ułamek czasu potrzebnego na wyrenderowanie witryny. Każdy obrazek znajdujący się na stronie wymaga od serwera oddzielnego zapytania (HTTP-Request). Zadaniem techniki „CSS Sprites” jest ograniczenie liczby żądań do serwera.

Jaki to ma sens

Posiadanie wielu elementów na stronie (css, js, jpg, …) zobowiązuje przeglądarkę do ich pobrania. Równolegle wczytywanych jest jednak tylko kilka obiektów z danego hosta. Jest to warunkowane zarówno przez sam serwer jak i aplikację, którą się posługujemy. Zmniejszenie liczby żądań do serwera znacznie redukuje czas odpowiedzi. To jest właśnie nasz zysk.

W praktyce

Wdrożenie CSS Sprites do szablonu strony może odbyć się bardzo szybko. W sieci istnieje wiele generatorów duszków (zapytaj Google). Za ich sprawą wybieramy pliki graficzne, które mają być scalone. Proces przebiega automatycznie. Osobiście wolałem przygotować daną grafikę samodzielnie – zajęło mi to parę minut z użyciem Gimpa. Problematyczne jest przygotowanie Sprite-a z gradientami lub innymi powtarzanymi elementami. Te obrazki zazwyczaj będą musiały być osobno. Fragment kodu:

/*
    SPRITE
*/
#logo, #frame_top, #frame_bottom
{
    background: url(../images/sprite.png);
    background-repeat: no-repeat;
}

/*
LAYOUT
*/
#logo
{
    background-position:-1px -111px;
    width:50px;
    height:48px;
    float:left;
}

#frame_top
{
    background-position:-1px -1px;
    float:left;
    width:884px;
    height:54px;
}

#frame_bottom
{
    background-position:-1px -56px;
    float:left;
    width:884px;
    height:54px;
}

Dla ścisłości: wskazanie tła dla wielu elementów jednocześnie jest celowym zabiegiem. Niektóre przeglądarki wczytują pliki niezależnie nawet jeśli się powtarzają.

Komentarze

Brak komentarzy. Może dodasz pierwszy?

Chcę dodać komentarz