Ko se lotimo optimizacije spletne strani je ena izmed stvari na seznamu tudi zmanjšanje HTTP zahtevkov (HTTP Requests). En izmed načinov, kako zmanjšati število teh zahtevkov je tudi zmanjševanje števila slik na spletni strani. Ampak to ne pomeni, da bo dejansko število slik manjše in bo stran manj zanimava – z uporabo CSS Sprites tehnike prikažemo več slik kot eno samo.

Zgodovina CSS Sprites

Izraz Sprite izhaja iz starih časov računalniške grafike in video iger, ko so zadevo uporabili tako, da so v pomnilnik namesto ene velike slike naložili več manjših, računalnik pa je potem prikazoval te posamezne kose. Manj podatkov kot se je prenašalo iz pomnilnika, hitreje je delovalo. Na podobnem principu delujejo tudi CSS Sprites, le da tukaj več manjših slik združimo v eno veliko, tako da namesto 10 slik naložimo le eno.

Na spletu je nekaj časa veljalo, da je slike bolje razrezati in prikazovati v več kosih, kar pa ne drži popolnoma. S tem se je dosegla le navidezna pohitritev nalaganja, saj so se delčki slike prikazovali hitreje. Ampak ta princip deluje le navidezno, v resnici ta tehnika ni hitrejša. Vsak uporabnik namreč z obiskom spletne strani sproži HTTP zahtevke za slike, priložene datoteke, itd. Odvisno od verzije HTTP protokola in brskalnika, ki se uporablja, pa lahko le ta v povprečju naenkrat prenaša le dva do štiri zahtevke. Več kot je zahtevkov, daljša je vrsta.

Kako se lotiti CSS Sprites

Torej, princip je preprost. Čim več slik želimo združiti v eno samo, saj s tem privarčujemo na številu HTTP zahtevkov, kar pomeni tudi krajši čas nalaganja spletne strani.

Vzemimo za primer vrstico nekaj ikon, ki jih uporabljamo za prikaz povezav do socialni omrežij. Imamo 7 ikon velik 24px X 24px, s skupno velikostjo 10,0KB.

Ikone za povezavo na socialna omrežja

Koda našega menija v HTML bi izgledala takole:

<style type="text/css">
.primer1 ul li { list-style:none; float:left; margin-right:5px; }
img { border:0px; }
</style>

<div class="primer2">
  <ul>
        <li><a href="#" ><img src="ikona-digg.png" width="24px" height="24px" /></a></li>
        <li><a href="#"><img src="ikona-facebook.png" width="24px" height="24px" /></a></li>
        <li><a href="#"><img src="ikona-delicious.png" width="24px" height="24px" /></a></li>
        <li><a href="#"><img src="ikona-google.png" width="24px" height="24px" /></a></li>
        <li><a href="#"><img src="ikona-linkedin.png" width="24px" height="24px" /></a></li>
        <li><a href="#"><img src="ikona-twitter.png" width="24px" height="24px" /></a></li>
        <li><a href="#"><img src="ikona-yahoo.png" width="24px" height="24px" /></a></li>
    </ul>
</div>

Če želimo ta meni prikazati s tehniko CSS Sprite, je naša prva naloga, da teh 7 ikon združimo v eno sliko. Najlažje to naredite s Photoshopom ali podobnim programom. Slike postavite eno poleg druge, lahko naredite tudi nekaj px razmika med njimi, da bodo bolj pregledne.

Primer ikon pripravljenih za delo s CSS Sprites

Ko imamo sliko v celoti sestavljeno lahko naredimo HTML, koda pa gre tako:

<style type="text/css">
.primer2 ul li { list-style:none; float:left; }
.primer2 ul li a {background:url(sprite.png) no-repeat; width:24px; height:24px; display:block; margin-right:5px; }
.primer2 ul li a.ena {background-position:0px 0px;}
.primer2 ul li a.dva {background-position:-24px 0px;}
.primer2 ul li a.tri {background-position:-48px 0px;}
.primer2 ul li a.stiri {background-position:-72px 0px;}
.primer2 ul li a.pet {background-position:-96px 0px;}
.primer2 ul li a.sest {background-position:-120px 0px;}
.primer2 ul li a.sedem {background-position:-144px 0px;}
</style>

<div class="primer2">
  <ul>
        <li><a href="#" class="ena"> </a></li>
        <li><a href="#" class="dva"> </a></li>
        <li><a href="#" class="tri"> </a></li>
        <li><a href="#" class="stiri"> </a></li>
        <li><a href="#" class="pet"> </a></li>
        <li><a href="#" class="sest"> </a></li>
        <li><a href="#" class="sedem"> </a></li>
    </ul>
</div>

Primerjava med klasično tehniko in CSS Sprites

Lahko se na lastne oči prepričate, da vidne razlike med eno in drugo tehniko ni. Prihranili pa smo 6 HTTP zahtevkov, poleg tega je tudi sprite slika velika 9,50KB, torej smo prihranili tudi na skupni velikosti datotek. Ponavadi se razlika v velikosti pozna še malo bolj.

Posebnosti in slabosti Spritov

Ena izmed težav Spritov je ta, da niso primerni za ponavljanje. Ponavljanje je namreč možno doseči le v eno dimenzijo, po osi X ali Y, v obe hkrati pa žal ne gre. Zato je tehnika CSS Sprites najbol primerna za posamezne grafične bloke, recimo ikone, kot uporabljeno v primeru.

CSS Sprites da ali ne?

Seveda, kjerkoli je možno! Zmanjšanje števila HTTP zahtevkov je verjetno ena najlažjih možnosti optimizacije. Morda se vam bo na začetku zdelo veliko dela, ampak ko se boste sistema enkrat navadili boste ugotovili, da niti ni tako zamudno opravilo. Osebno se gradnje strani lotim najprej na klasičen način, na koncu pa vse slike združim v sprite, kar je morda malo zamudno (dvojno delo), ampak je tako enostavneje delati vmesne popravke. Če malo pogooglate boste našli tudi razne CSS Sprites generatorje, ki jim samo posredujete slike, oni pa jih sami zložijo v vrstni red.