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.

CSS Sprites

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:

<ul id=”slicice”>
<li><a class=”slika01″ href=”#”> </a></li>
<li><a class=”slika02″ href=”#”> </a></li>
<li><a class=”slika03″ href=”#”> </a></li>
<li><a class=”slika04″ href=”#”> </a></li>
<li><a class=”slika05″ href=”#”> </a></li>
<li><a class=”slika06″ href=”#”> </a></li>
<li><a class=”slika07″ href=”#”> </a></li>
<li><a class=”slika08″ href=”#”> </a></li>
<li><a class=”slika09″ href=”#”> </a></li>
<li><a class=”slika10″ href=”#”> </a></li>
</ul>

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.

CSS Spirites primjer

Pored toga što smo broj HTTP zahtjeva smanjili za 9, manja je i grupna slika, a evo usporedbe:

CSS Sprites usporedba

Za još bolje performanse pročitajte: 7 Načina za poboljšanje performansi Vaših Internet stranica

Slika sa ovog bloga za CSS sprites:

hdonweb css sprite

Primjer jedne od Facebookovih slika za CSS sprites:

Facebook CSS Sprites

Još primjera

[download id=”32″ format=”1″]

The Mystery Of CSS SpritesTechniques, Tools And Tutorials

3 Comments

  1. Ante Primorac napisao:

    dali se isplati koristiti import ostalih css fileove u onaj glavni, dali je to npr 5 zahtjeva ili samo 1.

    • Ivan Mišić napisao:

      Misliš na “@import url”? S njim da, jer taj import se odradi odmah na serveru nije potreban dodatni zahtjev putem HTTP protokola.

  2. Ante Primorac napisao:

    hvala, ja sam se navikao koristiti import jer mi je mnogo preglednije i lakše za korištenje i izmjenjivanje

Komentiraj