pprogramowanie;

Zwięźle na temat programowania

Facebook

Sprites - szybsze ładowanie obrazków

27 lipca 2012, kategoria: Tworzenie stron

Sprites to małe obrazki używane na stronach. Mogą to być ikony menu, detale ozdobne i wszelkie inne małe elementy graficzne, często wykorzystywane z atrybutem hover. Używanie CSS Sprites polega na zastąpieniu kilku obrazków jednym. Sprites są używane we wszystkich dużych serwisach.

Na czym polega używanie sprites

Załóżmy, że mamy ikonę menu zmieniającą kolor po najechaniu. Normalnie taki efekt uzyskujemy dodając do dowolnego elementu kod CSS z atrybutem hover. Po najechaniu wczytany zostaje inny obrazek. Korzystając ze sprites wszystko będzie działać tak samo, jednak kilka małych obrazków zastępujemy jednym. Efekt ten często nazywany jest CSS Rollover.

Po co używać sprites?

Używanie sprites jest obecnie standardem, stosowanym przez wszystkie duże serwisy. Najważniejsze zalety stosowania tej techniki to:

Przeważnie sprites używamy właśnie po to, aby pozbyć się migotania. Przeglądarka WWW wczytuje pliki graficzne z Twojego hostingu wtedy gdy są potrzebne. Jeżeli masz na stronie przycisk, który po najechaniu zmienia tło, to nie zostanie ono wczytane aż do momentu pierwszego użycia. Skutkiem tego jest charakterystyczne mignięcie po pierwszym najechaniu na dany element. Sprites eliminuje ten problem.

Dodatkowo zamiast wysyłać dziesiątki żądań HTTP w celu wczytania wielu obrazków, wystarczy wysłać ich kilka aby wczytać całą grafikę strony.

Przykład działania

W jednym pliku graficznym trzymamy kilka obrazków używanych na stronie. Jeżeli chcemy aby jeden z obrazków został tłem jakiegoś elementu, musimy poprzez arkusz stylów ustawić tło obrazka dla elementu, a następnie ustalić granice w jakich znajduje się interesująca nas grafika. W przypadku braku ustalenia granic zostałby wyświetlony cały plik sprites ze wszystkimi obrazkami.

W zdarzeniu hover nie zmieniamy tła obrazka, a jedynie jego przesunięcie.

W przykładzie posłużę się stworzeniem przycisku zmieniającego swój kolor (obrazek tła) podczas najechania myszką. Tłem przycisku będzie obrazek z zastosowaną techniką CSS Sprites.

Tworzenie obrazka

To są dwa osobne przykładowe obrazki.

1 2

Miniaturki mają wymiary 100 x 25.  Znajdują się w dwóch osobnych plikach. Aby użyć techniki CSS Sprites muszę zamieścić je w jednym pliku o wymiarach 100 x 50. Efekt może wyglądać tak:

3

Oczywiście obrazki można ustawiać także obok siebie, pod sobą lub w każdej innej kombinacji. To nie ma żadnego znaczenia.

Kod HTML i CSS

Tworzymy button posiadający klasę .przycisk i importujemy arkusz stylów:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <button class="przycisk" type="submit"></button>
    </body>
</html>

Kolejnym zadaniem jest stworzenie arkusza stylów zawierający definicję klasy przycisk.

Najpierw ustalamy wymiary zgodne z wymiarami szarego tła (100×25). Następnie dla atrybutu hover zmieniamy położenie tła za pomocą background-position. Przesuniemy tło o 25 pikseli w dół skutkiem czego będzie wyświetlenie tła niebieskiego.

.przycisk {
    height: 25px;
    width: 100px;
    background: url('obrazek.png');
    cursor:pointer;
}

.przycisk:hover {
    background-position:0px -25px;
}

repozytorium: /strony-internetowe/sprites-szybsze-ladowanie-obrazkow.md

licencja: Creative Commons BY-SA 3.0

autor: Karol Trybulec

Wszystkie artykuły przechowywane są w repozytorium Github. Jeżeli uważasz, że coś można poprawić, możesz nanieść swoje zmiany. Wszelkie poprawki po zaakceptowaniu stają się automatycznie widoczne na blogu.