Yksi keino nopeuttaa mutkikkaan ja moniosaisen nettisivun latautumista on käyttää spritejä. Spritet ovat tekniikka, jossa sivun kuvaelementtejä kootaan yhdeksi kuvaksi, josta sitten näytetään vain osa.
Osan näyttäminen perustuu CSS-tyylien background-position-sääntöön, joten helpoimmin tämä tekniikka sopii kuviin, jotka ovat jonkun elementin taustakuvana. Tavallisille kuville spritetekniikkaa voi soveltaa jollain tapaa, mutta vaivattominta on spritettää taustakuvia.
Nopeuslisäys perustuu siihen, että yhden isomman kuvan lataaminen on usein nopeampaa kuin monen pienen. Latausnopeudet ovat nykyaikaisilla nettiyhteyksillä sitä luokkaa, että yhteyden ottaminen palvelimeen on helposti isompi ongelma. Lisäksi jotkut selaimet saattavat asettaa rajoituksia sille, montako rinnakkaista yhteyttä samalle palvelimelle voidaan ottaa, jolloin suuri kuvamäärä tuottaa turhaa odottelua.
Kun yksi iso sprite ladataan kerran, tarvitaan vain yksi palvelinyhteys, joten sivun muita elementtejä voidaan ladata nopeammin.
Spritet käyttöön
Spritejen käyttäminen vaatii oman vaivansa. Pitää etsiä sopivat kuvaelementit ja koota ne yhteen tiedostoon. Kaikkea ei voi tehdä spriteksi (esimerkiksi elementtejä, jotka toistuvat vaaka- ja pystysuuntaan) ja samaan tiedostoon ei voi sulloa kaikkea mahdollista (vaaka- ja pystysuuntaan toistuvia kuvia ei saa samaksi kuvaksi).
Onneksi tehtävään on olemassa erinomaisen kätevä apuväline. SpriteMe tekee spritejen luomisesta naurettavan helppoa. Mene kohdesivulle, klikkaa SpriteMe-linkkiä ja kas, ruudulle pälähtää ehdotus kuvista, jotka voisi yhdistää. Jos homma näyttää hyvältä, yksi napinpainallus luo spritet ja näyttää CSS-tiedostoihin tarvittavat muutokset.
Kannattaa tutkailla, millaisia säästöjä omilla sivuilla saa aikaiseksi. Kaikkialla spriteistä ei suurta iloa saa. Esimerkiksi näillä sivuilla on niin vähän graafisia elementtejä, ettei spriteistä saa mitään iloa. Lautapelioppaassa taas on huomattavasti graafisempi teema, johon tehtiin kolme spriteä, joilla leikattiin pois monta palvelinkutsua.
Kannattaa siis kokeilla, parhaassa tapauksessa saat nopeutettua sivujesi latautumista mukavasti.
Tämä saitti käyttää Thesis-teemaa
Jos et ole PHP-, HTML- tai CSS-guru, Thesis tarjoaa runsaasti mahdollisuuksia muokata blogin ulkoasua ilman mitään muutoksia koodiin. Kehittyneille käyttäjille tarjolla on todella laajat mahdollisuudet kustomoida sivustoa kattavien koukkujen ja suodattimien avulla.
Jos olet asiantuntija, pystyt tekemään todella siistiä jälkeä, kiitos Thesiksen erinomaisten käyttöohjeiden ja laadukkaan tukifoorumin. Saat kaiken oman koodin siististi yhteen tiedostoon. Voit käyttää Thesiksen luotettavaa pohjaa ja teräksistä typografiaa kerta toisensa jälkeen ja tehdä silti aivan erinäköisiä sivustoja. Lue lisää Thesiksestä:
{ 0 comments… add one now }