[WebDesign] [Photoshop] CSS Sprites

[ochota550]

 

 

 

Sprite to obrazki/grafika którą wykorzystujemy na stronie np. buttony, ikony społecznościowe, emotikony.
Technika CSS Sprites polega na zapisaniu całej tej grafiki w jednym pliku graficznym i "manipulowania" nim za pomocą własnościbackground-position [/url].
Widziałeś kiedykolwiek technikę CSS gdzie button "OFF" (stan spoczynku) oraz "ON" (po najechaniu myszką) był zamieszczony w jednym obrazku? Przkłady:

Technika ta jest podobna lecz wszystkie tego typu grafiki łączy w jeden plik graficzny z niezliczoną ilością obrazów.
Kilka spritów jako przykład:

• Onet
• YouTube
• Google
• Yahoo
• Facebook
• Twitter

 

 

 

Niektórzy wychodzą z założenia że im mniejszy obrazek (rozdzielczość) tym szybciej on się załaduje. Niestety tak nie jest ponieważ im więcej obrazków tym więcej zapytań HTTP, a im więcej ich mamy tym nasza strona będzie wolniej się ładować! Każdy obrazek zawarty w pliku HTML lub w CSS jest oddzielnym zapytaniem HTTP.
Oto jak nasza strona będzie pracować z wykorzystaniem CSS Sprite oraz z "tradycyjnym" umieszczaniem obrazków:



Tradycyjne wstawianie obrazków w CSS za pomocą własności <span style="font-family: courier new" ,="" courier,="" monospace'="">background-image:

#nav li a {background:none no-repeat left center}
#nav li a.item1 {background-image:url('../img/image1.gif')}
#nav li a:hover.item1 {background-image:url('../img/image1_over.gif')}
#nav li a.item2 {background-image:url('../img/image2.gif')}
#nav li a:hover.item2 {background-image:url('../img/image2_over.gif')}
...

 

Wykorzystanie techniki CSS Sprites:

#nav li a {background-image:url('../img/image_nav.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}
... 

 

Jak widzicie dzięki tej technice zmniejszyliśmy liczbę zapytań oraz wagę naszego pliku graficznego. Pomyślcie teraz co stało by się gdyby na naszej stronie było powiedzmy ponad 50 grafik, a niektóre z nich byłyby wykorzystywane wielokrotnie.

 

Zastanawiacie się pewnie czy jest jakaś reguła/szablon według którego macie tworzyć owego sprita. Niestety muszę was rozczarować ale nie ma żadnej reguły. Najlepiej jest gdy umieszczamy naszą grafikę od lewej-górnej strony naszego dokumentu, a jak go rozplanujecie to już wasza działka. Na początku możecie je tworzyć na wzór który podałem powyżej.

Nawet jeżeli tworzycie same projekty graficzne należy pamiętać o tej technice ponieważ większość stron jest tworzonych z myślą o optymalizacji serwisu tak więc klient może wymagać od was byście umieścili grafikę w jednym pliku by następnie usprawnić pracę developera który będzie miał za zadanie "ożywić" nasz projekt.

Przykładowy Sprite MPC

 

 

 

 

Poradnik ma na celu wyjaśnienia użytkownikowi działanie techniki CSS Sprites,

oraz jak może ją wykorzystać przy tworzeniu layouta.

Zakaz kopiowania bez zgody autora.