dikamilo.net

Kolejny blog w sieci...

Atlas obrazków w CSS

Atlas obrazków jest techniką powszechnie znaną jako CSS Sprites polegającą na umieszczeniu wszystkich wykorzystywanych obrazków w jednej dużej bitmapie. Ma to na celu przyspieszenie ładowania stron www poprzez redukcję tak zwanych HTTP Requests.

Strony internetowe składają się z pliku HTML, arkusza stylów oraz różnej maści bitmap czy skryptów JavaScript. Aby przeglądarka potrafiła wy renderować stronę internetową, najpierw pobierany jest dokument HTML, następnie arkusz stylów oraz bitmapy i skrypty. Każdy obrazek czy skrypt to osobne żądanie HTTP Request. Przeglądarki internetowe potrafią pobierać 2-4 zapytania z serwera www w tym samym czasie, czas ładowania pliku HTML to zazwyczaj 10% czasu ładowania całej strony. Aby się o tym przekonać wystarczy uruchomić Firebug'a.

Przykład ładowania dikamilo.net Rys1: Przykład ładowania dikamilo.net

Aby zmniejszyć ilość HTTP Requestów stosuje się atlasy obrazków. Strony internetowe zazwyczaj są bogate w ikonki czy gradienty. Im więcej takich elementów tym więcej zapytań wykonuje przeglądarka (pomijając cachhe).

Jak można zobaczyć na Rys1, mój blog ładuje tylko dwa pliki png. W jednym są wszystkie ikonki a w drugim wszystkie gradienty. Dlaczego nie połączyłem tego w jeden plik ? Dla wygody, dodając nowe ikonki nie muszę zmieniać ustawień tła.

Jak przygotować atlas obrazków ?

Przygotowanie atlasu obrazków jest zależne od tego w jaki sposób piszemy naszą stronę. Są dwie techniki. Możemy umieścić wszystkie ikonki jedna koło drugiej tak jak np. w serwisie wykop.pl. Taka technika ma zastosowanie jedynie wtedy gdy element "z ikonką" posiada dodatkowy element wielkości ikonki z odpowiednio ustawionym tłem z atlasu obrazków (Rys2 przykład z lewej strony).

Inną techniką jest rozmieszczenie ikonek w atlasie obrazków jedna pod drugą zostawiają ustaloną ilość przezroczystego miejsca między nimi. Ilość wolnego miejsca między ikonkami jest zależna od wysokości elementów z ikonką (licząc padding). Ta technika jest o tyle dobra że nie musimy dodawać dodatkowego elementu HTML, możemy ustawić tło bezpośrednio z stylizowanym znaczniku. Z prawej i lewej strony ikonki jest poste tło więc nie będzie widać innych ikonek, a stylizowany element może mieć dowolną szerokość.

Przykład umiejscowienia ikonki Rys2: Przykład umiejscowienia ikonki.

Mam atlas obrazków, co dalej ?

Zauważmy że każdy element który korzysta z atlasu obrazków ma takie samo tło. Wygodnie jest utworzyć sobie odpowiednią klasę która będzie nakładać wybrane tło:

.icons {
    background-image: url("sciezka/do/atlasu/obrazkow");
    background-repeat: no-repeat;
}

.gradients {
    background-image: url("sciezka/do/atlasu/obrazkow");
    background-repeat: repeat-x;
}

Zauważmy że w przypadku ikonek wyłączamy powtarzanie się o obu osiach, nie chcieli byśmy aby ikonka była widoczna kilka razy obok siebie. W przypadku gradientów włączamy powtarzanie w osi X, tło będzie widoczne na całej szerokości elementu mimo tego że szerokość pliku z atlasem tła może mieć 1px.

Aby "przewinąć" tło do odpowiedniego miejsca stosuje się background-position. Pierwszym parametrem jest przesunięcie w osi X od lewej strony, zazwyczaj ustawia się go na zero. Drugi parametr to przesunięcie w osi Y, tutaj stosuje się ujemne wartości. Gdy ustawimy .icons bez background-position widoczna będzie pierwsza ikonka, aby zobaczyć drugą odejmujemy od zera wysokość pierwszej ikony itd . Dobrze jest utworzyć odstępy jednakowej wielości np. ikona ma wielkość 32px na 32px, największy padding jaki wykorzystamy to np. 5px z dołu i góry więc ustalamy sobie wielkość pola 37px na 37px i w obrębie tego pola ustawiamy ikonkę (najlepiej na środku). Wtedy współrzędne dla ikonem mamy następujące:

  • ikonka1: 0 0
  • ikonka2: 0 -37px
  • ikonka3: 0 -74px

Oczywiście plus margines błędu bo nie zawsze mamy taki sam padding lub np. ikonka lepiej wygląda jak jest obniżona o 2 piksele.

Tak więc aby nadać danemu elementowi ikonkę, dodajemy do jego atrybutów klasę .icons, jeżeli element powtarza się wiele razy na stronie to dodajemy jego klasę a jeżeli jest unikatowy to id.

Przykładowa lista w HTML:

<ul>
    <li class="icons" id="twitter"><a href="#">Twitter</a></li>
    <li class="icons" id="facebook"><a href="#">Facebook</a></li>
</ul>

Reguły CSS:

.icons {
    background-image: url("sciezka/do/atlasu/obrazkow");
    background-repeat: no-repeat;
}

#twitter {
    background-position: 0 -50px;
}

#facebook {
    background-position: 0 -100px;
}

Należy pamiętać aby element a posiadał odpowiedni odstęp od lewej strony inaczej napis będzie na ikonce.

Przykład wykorzystania atlasu obrazków można zobaczyć również w źródłach mojego bloga, plik CSS jak i również pliki icons.png oraz gradients.png

Tagi

Komentarze (4)

  • #1 // m.z napisał:

    Technika dobra z dwóch powodów: szybkość i nie trzeba znać nazw ikonek :D Czekam na następne artykuły o css.

  • #2 // Kamil Łuszczki napisał:

    Dzięki za komentarz. Postaram się coś dodać o CSS ale na razie nie mam pomysłu na temat.

  • #3 // Zmuda napisał:

    Co do CSS ,to może jakieś ciekawe rozwijalne menu :) Oprawić to jeszcze biblioteką Jquery , i mogą powstać ciekawe rzeczy :D Pozdro

  • #4 // Kamil Łuszczki napisał:

    Tak ale to raczej nie temat na artykuł na bloga :)