CSS sprites – izmjena sličica u linkovima; kako i zašto?

spritegen.website-performance.org

Sigurno ste već viđali css tehniku gdje jedna pozadinska sličica gumba sadrži on i off stanje koje se aktivira pomoću pomicanja background-position-a.

Css sprites je nešto više od toga, umjesto samo dvije takve sličice sada možete kombinirati nebrojene sličice u jednu.

Zašto kombinirati sve te sličice u jednu kada je brže ubaciti nekoliko zasebnih?

Zato što nije brže, samo tako izgleda. Nekada su se slike rezale u najmanje dijelove da bi se stranica brže učitavala. No, to je bila samo varka. Svaka od tih sličica je zaseban HTTP zahtjev i što ih je više to je stranica ne efikasnija. Drugim riječima, što je tih zahtjeva više to će se stranica dulje učitavati.

Na primjer, ako imamo 5 gumba sa po dva stanja (a i a:hover) to će se izvršiti 10 HTTP zahtjeva.
Ukoliko sve te sličice ubacimo u jednu izvršiti će samo jedan zahtjev, a ukupna težina slika neće biti ništa veća, ako ne i manja.

Dobra vijest je da više ne moramo otvarati photoshop i sve sličice slagati ručno. Ne moramo više niti računati, za sve to postoji jednostavan on-line CSS Sprite generator

http://spritegen.website-performance.org/

Željene ikone ili slike poredamo po željenom redu, zipamo i uploadamo. Ispunimo osnovne informacije koje želimo i kliknemo za generiranje koda i slike. Nakon toga prepišemo dobiveni kod i downloadiramo sliku.

Za probu smo uploadali 4 ikone – dvije za a stanje i dvije za a:hover . Ikone smo nazvali check1.png, check2.png, error1.png i error2.png.

Dobili smo slijedeći generirani css kod:

.check2 { background-position: 0 -30px; }
.check1 { background-position: 0 -108px; }
.error2 { background-position: 0 -186px; }
.error1 { background-position: 0 -264px; } 

/* Nemojte zaboraviti dodati background svojstvo za ikone, kao npr.*/

#container li {
   background: url(icons.png) no-repeat top left;
}

Njega smo ubacili u svoj css i html ovako:

CSS

li
{
ist-style-type:none;
height:50px;
width:50px;
margin: 10px;
}

a
{
background:url(icon.png) no-repeat top left;
padding:25px;
}

.check a
{
background-position:0px -30px;
}

.check a:hover
{
background-position: 0 -108px;
}

.error a
{
background-position: 0 -186px;
}

.error a:hover
{
background-position: 0 -264px;
}

HTML

Pogledajte demo ili ikone