Sprite to łączenie wielu mniejszych obrazów w jednym pliku. Na czym dokładnie polega ta technika? Jakie są jej zalety? Jak w praktyce wygląda umieszczenie CSS Sprite na stronie? Jak wskazać pozycję w celu wyświetlenia właściwego obrazka?
Załączniki
CSS Sprite to technika zapisywania wielu obrazków (zwykle są to logotypy, ikonki, elementy nawigacji) w jednym pliku i wyświetlaniu odpowiedniego fragmentu obrazka jako tła elementu. Za poprawne wyświetlanie odpowiada CSS, a konkretnie odpowiednia manipulacja parametrami background-position.
W praktyce wygląda to tak, że tworzymy jeden obrazek z na przykład trzema ikonkami ułożonymi obok siebie. Zamiast ładować trzy różne pliki, ładujemy jako tło elementu jeden plik, a więc po pierwsze zaoszczędzamy pasmo serwera (jedno zapytanie zamiast wielu) oraz zmniejszamy czas ładowania się strony, ale również zapobiegamy brzydkiemu doładowywaniu się grafik na przykład w sytuacji kiedy element jest domyślnie niewidoczny, a pojawić się ma po najechaniu kursorem myszy.
Pozycję tła jaką należy wpisach w parametrach background-position można odczytać np. z Photoshopa, gdy przygotujemy nasz obrazek, można zaznaczyć każdy z elementów wykorzystując narzędzie "cięcie na plasterki". Gdy klikniemy prawym przyciskiem na zaznaczony plasterek i wybierzemy "edycja opcji plasterka", będziemy oprócz wymiarów plasterka widzieć również jego przesunięcie X oraz Y względem punktu 0 (zbiegu górnej i lewej krawędzi) - a o to nam chodzi. Później wartości należy przepisać do CSS-a. Pierwsza wartość parametru background-position to przesunięcie na osi X, druga - Y.
Poniższy zapis ostyluje nam element div w taki sposób, że będzie on miał szerokość i wysokość 45 pikseli, a jego tłem będzie obrazek mojsprite.png przesunięty względem lewej krawędzi o 45 pikseli w prawo. Przesunięcia na osi Y nie będzie (podana wartość 0px):
div {
width: 45px;
height: 45px;
background: url(images/mojsprite.png);
background-position: 45px 0px;
}
Dziękuję za wyczerpującą odpowiedź. :) Sprite jest prostszy w zastosowaniu niż myślałam. Dobrze wiedzieć, że można posiłkować się Photoshopem przy określaniu pozycji obrazka. Czy powyższy zapis działa tak samo, jeśli wykorzystuję grafikę wektorową i pliki SVG?
Z plikami SVG też będzie działać, o ile nie będziesz przejmowała się IE8.
Nieszczęsna IE8. :) Dzięki. Pracuję obecnie nad moją pierwszą własnoręcznie zaprogramowaną stroną. Na pewno będę pracować na Spricie. Doczytałam jeszcze, że metoda ta sprawdza się odnośnie grafiki, która jest stałym elementem na stronie, a np. zdjęcia towarzyszące aktualnościom zapisujemy już osobno. Ale mam wątpliwość, czy np. slider składający się z 3 zdjęć na stronie głównej, który jest stałym elementem strony mogę umieścić w Spricie? Kiedy w zasadzie używać Sprite'a, a kiedy nie?
CSS Sprite świetnie sprawdza się na przykład dla ikonek (np. obrazek lupki przy wyszukiwarce treści), ale zdecydowanie odradzam stosowanie tej metody w przypadkach, kiedy faktycznie mamy do czynienia z obrazkiem uzupełniającym treść artykułu, a nie tylko powtarzającą się na każdej stronie ikonką w menu czy elementem dekoracyjnym. Warstwa struktury HTML i warstwa prezentacyjna CSS powinny być od siebie oddzielone. Ilustracje, zdjęcia należy wstawiać w HTML. Według mnie slider zdecydowanie nie powinien być robiony tą techniką. Nie będzie można na przykład dodać atrybutu alt do obrazków, kiedy obrazek umieścimy jako tło elementu w CSS. Poza tym nawet jeśli slider ma być z założenia stałym elementem strony, to warto mimo wszystko tak go zaprojektować/zaprogramować, aby w przyszłości móc dodawać z łatwością nowe slajdy jako elementy html z poziomu panelu administracyjnego, zwłaszcza jeśli strona ma być responsywna, a zdjęcia w sliderze różnych proporcji.
To ma sens, dzięki za pomoc. :)
