Ubrzajte učitavanje i uštedite bandwidth koristeći CSS Sprites

Kao vlasniku Internet stranice, a i posjetitelju mnogih drugih najgore iskustvo predstavljaju duga učitavanja. Naravno to ne predstavlja problem nekom tko ima dedicirani hosting, dok za nas ostale na dijeljenima jedino što preostaje pribjeći raznim metodama optimizacije, a jedna od njih je i CSS sprites.

Što su CSS Sprites?

Svaki puta kada pristupate nekoj Internet stranici prema serveru na kojem je smještena putem HTTP protokola se šalju zahtjevi za određenim sadržajem: css, html, js, png, jpg… Naravno da je vama sav taj sadržaj potreban kako bi stranica bila potpuna u dizajnu, no ono što možete napraviti je smanjiti broj zahtjeva tako što manje slike grupirate u jednu veću, te ih uz pomoć css atributa background-position rasporedite po stranici.

Morate znati da ih je najbolje koristiti za elemente koji ne koriste ponavljanje po x ili y osi definirano css atributom.

Primjer CSS sprites

Za primjer ću iskoristiti odličnu kolekciju ikona društvenih mreža napravljenih od strane Komodo Media i to 10 sličica. Umjesto da u HTML-u ili CSS-u učitavam svaku od njih posebno, grupirao sam ih na jednu datoteku kao što je prikazano na slici niže. Primjetit ćete da je u CSS-u svaka slijedeća sličica pomaknuta za -32px i za x i y os, ovisno gdje se nalazi na slici.

Kako za razliku od umetanja slike unutar HTML-a uz pomoć <img> taga css ne zna kolika je njena veličina vi ćete morati sami definirati box u kojem će se nalaziti pojedina sličica, bit će vam jasnije u primjeru CSS-a.

HTML kod:

CSS kod:

body {font-family:Georgia, "Times New Roman", Times, serif}
#slicice {margin:0;padding:50px 0}
#slicice li {list-style-type:none; height:32px; padding-right:10px; float:left}
#slicice li a {background: url(css-spirite.png); width:32px; height:32px; float:left}
#slicice li a.slika01 {background-position: 0px 0px}
#slicice li a.slika02 {background-position: -32px 0px}
#slicice li a.slika03 {background-position: -64px 0px}
#slicice li a.slika04 {background-position: -96px 0px}
#slicice li a.slika05 {background-position: -128px 0px}
#slicice li a.slika06 {background-position: 0px -32px}
#slicice li a.slika07 {background-position: -32px -32px}
#slicice li a.slika08 {background-position: -64px -32px}
#slicice li a.slika09 {background-position: -96px -32px}
#slicice li a.slika10 {background-position: -128px -32px}

Ono što smo postigli možete vidjeti na slici.