Verkkosivujen optimointi: CSS-sprite vai Data URI?

29 marras 2012 • Teknologia ja digitaalinen kehitys

Verkkosivuilla on tavallisesti useita kymmeniä kuvia ja ikoneita. Kuvien avulla verkkosivun sisällöstä saadaan houkuttelevampaa ja mukavamman näköistä. Kuvat vievät kuitenkin monesti myös aimo osan sivuston aiheuttamasta verkkoliikenteestä. Liikenteen kasvaessa verkkosivujen optimointi tulee ajankohtaiseksi. Tällä erää keskitymme siihen, miten kuvia voidaan optimoida. Tarkastelun kohteena ovat CSS-sprite ja Data URI -tekniikat.

Alkuun mainittakoon heti, että yllä olevat tekniikat on suunnattu sivustojen teknisille kehittäjillä. Normaalin sisällöntuottajan ei näitä tekniikoita kannata käyttää, sillä ne monimutkaistavat huomattavasti kuvien lisäämistä esimerkiksi blogiartikkeliin. Isokokoisten kuvien lisääminen kyseisillä tekniikoilla aiheuttaa myös enemmän haittaa kuin hyötyä. Minkälaisia kuvia tekniikoilla sitten kannattaa optimoida? Optimoinnin kohteina ovat yleensä erilaiset ikonit ja logot, jotka ladataan samalla sivulla. Esimerkiksi tällä sivulla, jota nyt luet, optimoinnin kohteena voisivat olla sivun alaosassa olevat sosiaalisen median ikonit.

Mieleen saattaa juolahtaa, että miksi näin pieniä kuvia tarvitsisi jotenkin optimoida. Nehän ovat todella pieni osa sivustoa. On toki totta, että jos kyseessä on pieni sivusto, jossa kävijöitä ei ole paljon, tällöin optimointi saattaa olla ajanhukkaa. Sen sijaan suurilla sivustoilla, joissa on kymmeniä tuhansia kävijöitä päivässä, tilanne on aivan toinen.

Verkkosivujen optimointi CSS-sprite avulla

Mikäli kuvien optimointia ei ole sen suuremmin ajateltu, tällöin kuvat on lisätty sivuille lisäämällä CSS-määritteisiin yksittäisen kuvan osoite tai lisäämällä HTML:ään img-elementti, jonka lähteeksi on määritetty kuvan osoite. Otetaan esimerkiksi tämän sivun alaosassa olevat sosiaalisen median ikonit.

HTML-koodi voisi näyttää jotakuinkin seuraavalta: [gist id=”d956c016a40475173f3c”]

Koodista näkee, että jokaiselle kuvalle (img) on määritetty oma polku (src) eri kuviin. Tämä tarkoittaa lyhykäisyydessään sitä, että sivulatauksen yhteydessä tehdään myös kuusi muuta HTTP-pyyntöä, kun kuvat ladataan. Kuvien yhteiskoko on 3,81 kilotavua. HTTP-pyyntöjen minimointi on aina suositeltavaa, sillä se vähentää sivun lataukseen kuluvaa aikaa.

CSS-sprite -tekniikassa on yksinkertaisesti kyse siitä, että nämä pienet kuvat yhdistetään yhdeksi isoksi kuvaksi. Tämän jälkeen CSS:ssä ladataan yksi kuva ja haetaan oikea kuvan osa background-position määritteen avulla.

Pystymme siis optimoimaan esimerkkiämme niin, että kuuden kuvan sijaan ladataan vain yksi kuva. Monissa tapauksissa tämä yksittäinen lataus myös pienentää ladattavan tiedon määrää. Jos ylläolevat sosiaalisen median ikonit yhdistetään yhteen kuvaan, kuvan koko on yhteensä 2,83 kt, joten palvelimelle tehtävien HTTP-kutsujen vähentyessä myös sieltä saatavan tiedon määrä pienenee.

Esimerkki CSS-määritteistä yhdistelmäkuvaa varten.
[gist id=”9b9f1b61116187d53f60″]

HTML-koodi kutistuu pienempään muotoon.
[gist id=”39e1d3e1edeae89c63c8″]

Loppukäyttäjälle lopputulos näyttää ulkoisesti samalta, mutta sivuston suorituskyvyn kannalta on päästy parempaan tulokseen vähentämällä HTTP-kyselyitä viidellä ja pienentämällä ladattavan tiedon määrää lähes kilotavulla. Kannattaa huomioida, että tässä on kyse erittäin pienestä esimerkistä. Isommalla esimerkillä useimmiten hyöty on myös selvästi suurempi.

CSS-sprite tekniikka on ollut olemassa jo monia vuosia. Tästä huolimatta monilla sivustoilla sitä ei vieläkään käytetä, vaikka sen kanssa saataisiin nopeutettua sivulatauksia. CSS-sprite tekniikan huonoimpana puolena on yleensä pidetty yhdistelmäkuvan ylläpidettävyyttä ja sitä, että kuvien määritys CSS:n background-position määritteellä on hankalaa, sillä oikea paikka pitää tietää pikselilleen. Tekniikan alkuaikoina tämä oli ihan totta, mutta nykyään se on lähinnä huono tekosyy.

CSS-spriten teko ja ylläpito onnistuu helposti esimerkiksi SpritePad-palvelulla. Käyttäjä pystyy helposti raahaamaan kuvia kuva-alueelle suoraan työpöydältä. Tämän lisäksi sivun oikealla sivulla näkyy pienien kuvien background-positiot heti, eikä niitä tarvitse siis itse lähteä selvittämään. Kun kuva on kokonaisuudessaan valmis, sen ja CSS:n pystyy lataamaan Download-linkistä. Palvelussa pystyy myös säilyttämään tehdyt yhdistelmäkuvat myöhempää muokkailua varten.

CSS-määrite background-position on ollut käytössä jo CSS:n ensimmäisestä versiosta lähtien. Tämän myötä tekniikkaa voi käyttää kaikilla nykyisillä ja myös vanhemmilla selaimilla toimivasti.

Data URI

Data URI -tekniikka on viime aikoina nostanut päätään jonkin verran ja on suhteellisen uusi ominaisuus selaimissa. Kyseisen tekniikan avulla kuvan tieto pystytään liittämään suoraan esimerkiksi CSS-tiedostoon niin, ettei HTTP-pyyntöjä tarvitse tehdä yhtään, kuten esimerkiksi CSS-sprite tekniikalla. Alla on yllä olevassa esimerkissä käytetyn Facebook-ikonin Data URI.

[gist id=”d406ed60c14cf29a8691″]

Data URI on muotoa: data:[[<mime tyyppi>]][[;charset=<merkistö>]][[;base64]],<koodattu tieto>

Kuten näkyy, käyttäjälle kuva näyttää vain todella pitkältä merkkijonolta, jossa ei tunnu olevan mitään järkeä. Selaimelle siinä on kuitenkin järkeä. Data URI eliminoi kokonaan ylimääräiset HTTP-pyynnöt, mutta asia ei ole lopulta kuitenkaan ihan näin yksinkertainen optimoinnin ja toteutuksen näkökulmasta.

Tekniikka on hyvin uusi, niinpä esimerkiksi IE7 ei tue sitä ollenkaan. IE8:lla taas Data URI:n koko voi olla maksimissaan 32768 tavua. Tämä tarkoittaa sitä, että jos kuvat haluaa näkyviin vanhoillakin selaimilla, niitä varten pitää olla jokin toinen ratkaisu. Ongelman voi IE-selaimilla ratkaista esimerkiksi MHTML:n avulla. Käytännössä tämä tuo kuitenkin lisätyötä verrattuna CSS-spriteen, joka toimii kaikilla CSS:n ensimmäistä versiota tukevilla selaimilla.

Data URI:n ylläpitämisestä voi myös olla montaa mieltä. Kun kuva muuttuu siitä pitää aina generoida uusi Data URI. Tämä vie toki hieman aikaa, mutta on kuitenkin lopulta hyvin yksinkertainen toimenpide. Kuvan voi muuttaa Data URI:ksi esimerkiksi tällä työkalulla.

Data URI on testien mukaan kooltaan noin kolmasosan suurempi kuin vastaava kuvaresurssi. Data URI siis kasvattaa ladattavan tiedon määrää jonkin verran. Mikäli palvelin gzippaa sisällön, tällöin Data URI on vain 2-10 prosenttia suurempi kuin kuva. Tarkoitus on kuitenkin optimoida suorituskykyä, tietomäärän kasvu ei tässä asiassa auta, vaikka tietyissä tilanteissa muutaman prosentin ero saattaakin olla hyvin marginaalinen. Data URI:en käyttö ei rajoitu pelkästään kuviin. Niitä voi käyttää myös esimerkiksi videoiden kanssa.

Yhteenveto

Kumpi sitten on parempi tekniikka verkkosivujen optimointiin? HTTP-kutsujen minimointi Data URI:en kanssa on mukava ajatus, mutta tekniikka on kuitenkin vielä niin uusi, että siinä on liian monta muttaa verrattuna CSS-spriteen.

IE7-selainta käytetään valitettavasti edelleen. Vanhempien selaimien tukeminen tuo Data URI:en kanssa lisätyötä. Tämän lisäksi Data URI on kooltaan suurempi kuin kuvaresurssi. Vaikka tekniikalla pystytään säästämään yksi HTTP-kutsu, joudutaan tietoa lataamaan enemmän kuin CSS-spritellä.

Kannattaa huomioida, että molemmilla tekniikoilla optimointia saa aikaiseksi verrattuna tapaan, jossa jokainen kuva on oma erillinen resurssi.
On mahdollista, että Data URI kehittyy tulevaisuudessa paremmaksi ratkaisuksi, mutta toistaiseksi pysyttelen CSS-spritessä.