CSS-sprite-tekniikka – vähennä HTTP-pyyntöjen määrää ja nopeuta sivustoasi

CSS-sprite-tekniikalla HTTP-pyyntöjen vähentäminen tarkoittaa verkkosivulla käytettävien pienten kuvien yhdistämistä yhdeksi isommaksi kuvatiedostoksi, josta CSS näyttää vain tarvittavan osan. Tavoitteena on välttää kymmenien pikkutiedostojen – kuten ikonien, painikkeiden, logoversioiden ja some-symbolien – erilliset HTTP-pyynnöt, lyhentää sivun latausaikaa ja tarjota sulavampi käyttökokemus etenkin mobiiliverkoissa.

Nykyisessä verkkosuorituskyvyn optimoinnissa pelkkä kuvakoko ei ratkaise kaikkea; ratkaisevaa on myös se, kuinka monta kertaa selain lähettää pyynnön palvelimelle. HTTP/2 ja HTTP/3 ovat pienentäneet rinnakkaisten pyyntöjen kustannuksia, mutta jokainen pyyntö kulkee silti DNS-selvityksen, TLS-kättelyn, priorisoinnin, jonotuksen, välimuistin tarkistuksen ja selaimen jäsentämisen läpi. Siksi oikeassa tilanteessa käytetty CSS-sprite-tekniikka voi tuoda yhä mitattavaa hyötyä erityisesti runsaasti ikoneita sisältävissä käyttöliittymissä.

Tässä oppaassa käymme läpi, mitä CSS-sprite-tekniikka on, milloin sitä kannattaa hyödyntää, miten se vertautuu moderneihin vaihtoehtoihin, kuinka se toteutetaan askel askeleelta ja millaisilla hosting-asetuksilla sitä tuetaan. Hostragonsin blogiin laadittu sisältö ei jää teorian tasolle, vaan tarjoaa käytännönläheisen, testattavissa ja ylläpidettävissä olevan optimointisuunnitelman oikeisiin projekteihin.

Miksi HTTP-pyyntöjen määrä vaikuttaa sivuston nopeuteen?

Kun verkkosivu avautuu, selain ei lataa ainoastaan HTML-tiedostoa. Myös CSS-tiedostot, JavaScript-tiedostot, fontit, kuvat, faviconit, mainoskoodit, analytiikkaskriptit ja kolmannen osapuolen resurssit pyydetään erikseen. Jokainen resurssi käynnistää verkkopyynnön. Mitä enemmän pyyntöjä, sitä enemmän selain joutuu hallinnoimaan tiedostoja, ja viiveitä voi syntyä erityisesti ensilatauksen aikana.

Kuvittele esimerkiksi verkkokaupan etusivu, jolla on 24 pientä kategoria-ikonia, 8 maksutapalogoa, 6 some-symbolia ja 10 käyttöliittymäkuvaketta. Jos kaikki nämä ladataan erillisinä PNG- tai SVG-tiedostoina, pelkät ikonit aiheuttavat 48 erillistä HTTP-pyyntöä. Vaikka jokainen tiedosto olisi vain 1–3 kt, kokonaiskuorma ei muodostu pelkästä tiedostokoosta. Otsikkotiedot, välimuistin validointi ja yhteydenhallinta lisäävät kaikki kuormaa.

Tässä kohtaa CSS-sprite-tekniikka astuu kuvaan. 48 erillisen pikkukuvan sijaan ladataan yksi sprite-kuva. CSS:n background-position-ominaisuudella jokaiselle elementille näytetään tästä isosta kuvasta vain haluttu koordinaatti. Näin pyyntöjen määrä voi pudota dramaattisesti. Oikein pakatulla sprite-tiedostolla hallitaan samalla kokonaistiedostokokoa ja yksinkertaistetaan selaimen lataus- ja käsittelytyötä.

Mitä CSS-spritet ovat ja miten ne toimivat?

CSS-sprite tarkoittaa usean pienen kuvan sijoittelua järjestelmällisesti yhteen kuvatiedostoon. Selain lataa tämän yhden tiedoston, ja CSS määrittää kullekin elementille leveyden ja korkeuden, jolloin taustakuvasta näkyy vain haluttu osa. Tämä toteutetaan yleensä background-image-, background-position-, width-, height- ja background-size-ominaisuuksilla.

Yksinkertainen esimerkki: sprite-tiedostossa on kolme 32x32 pikselin ikonia vierekkäin. Ensimmäisen ikonin sijainti on 0 0, toisen -32px 0 ja kolmannen -64px 0. Näin kolmen erillisen kuva-elementin sijaan voidaan kolmella CSS-luokalla kutsua saman taustatiedoston eri osia.

Tämä lähestymistapa toimii parhaiten silloin, kun kuva ei kanna sisällöllistä merkitystä vaan on koristeellinen tai käyttöliittymälähtöinen. Esimerkiksi valikkoikonit, nuolet, merkit, tilakuvakkeet, tähtiarvostelugrafiikat, maksutapasymbolit ja hover-tilat sopivat sprite-tekniikkaan. Sitä vastoin tuotekuvia, artikkelien kansikuvia tai SEO:n kannalta alt-tekstiä vaativia sisältökuvia ei pidä sisällyttää spriteen.

Millaisissa projekteissa sprite-tekniikasta on eniten hyötyä?

CSS-spritet eivät ole pakollisia jokaisella verkkosivustolla. Tietyissä projektityypeissä vaikutus on kuitenkin selvempi. Käyttöliittymät, joissa on paljon toistuvia pikkukuvia, laajat valikkorakenteet omaavat yrityssivustot, vanhat teemapohjat, hallintapaneelit, laskeutumissivustot ja staattisia kuvakeikoneita sisältävät verkkokauppakomponentit voivat hyötyä tekniikasta.

• Sivustot, joilla on paljon pieniä PNG- tai JPG-ikoneita.
• Projektit, joissa on paljon mobiilikäyttäjiä ja jotka ovat herkkiä viiveille.
• Sivustot, joissa vanha teema tai räätälöity ohjelmisto aiheuttaa runsaasti HTTP-pyyntöjä.
• Staattiset käyttöliittymäkomponentit, joissa halutaan parantaa välimuistin tehokkuutta.
• Design-järjestelmät, joihin fontti-ikonit tai inline-SVG eivät sovi.

Erityisesti jaetulla hostingilla, VPS:llä tai pilvipalvelimella staattisten tiedostojen hallinnan yksinkertaistaminen on suorituskyvyn kannalta arvokasta. Hostragonsilla julkaistulla sivustolla tällaisia optimointeja tuetaan vahvalla hosting-infrastruktuurilla, oikeilla välimuistiotsikoilla ja SSL-konfiguraatiolla, mikä tuottaa paremman lopputuloksen. Aiheeseen liittyviin tuotteisiin voi tutustua sivuilla webbihotelli, VPS-palvelin ja SSL-sertifikaatti.

CSS-spritet ja nykyaikaiset vaihtoehdot vertailussa

Vuonna 2026 CSS-spritet eivät ole ainoa oikea ratkaisu. SVG-sprite, ikonifontti, inline-SVG, modernit CSS-mask-tekniikat ja HTTP/2:ta hyödyntävä erillisten tiedostojen käyttö ovat kaikki vaihtoehtoja. Siksi päätöstä tehdessä on arvioitava sivuston arkkitehtuuri, tiimin osaaminen, ylläpitotarpeet ja saavutettavuusvaatimukset.

Yleinen nyrkkisääntö on: jos käyttöliittymässä on paljon bittikarttaikoneita, CSS-spritet ovat yhä järkevä valinta. Jos ikonit ovat vektorimuotoisia ja värinvaihtotarve on suuri, SVG-sprite voi olla nykyaikaisempi ratkaisu. Jos käytössä on vain 4–5 pientä ikonia, hyvin välimuistitetut erilliset tiedostot saattavat riittää sprite-kuvan valmistelun sijaan.

CSS-sprite-tekniikan käyttöönotto askel askeleelta

Onnistunut sprite-toteutus ei ole pelkkää kuvien asettelua vierekkäin. Ensin on analysoitava nykyiset resurssit, sitten valittava oikea tiedostomuoto, määritettävä CSS-koordinaatit tarkasti ja lopuksi varmistettava tulos suorituskykytesteillä. Seuraava prosessi on turvallisesti sovellettavissa todellisessa projektissa.

1. Analysoi nykyiset kuvat ja pyyntömäärät

Ensimmäinen askel on päättää, mitkä kuvat sisällytetään spriteen. Avaa Chrome DevToolsin Network-välilehti, päivitä sivu ilman välimuistia ja käytä Img-suodatinta. Listaa pienikokoiset mutta runsaslukuiset ikonit. Jos havaitset esimerkiksi 30 PNG-tiedostoa, joiden koko vaihtelee 1 kt ja 8 kt välillä, tämä ryhmä on potentiaalinen sprite-ehdokas.

Vastaa analyysissä seuraaviin kysymyksiin: Onko kuva koristeellinen vai sisällöllinen? Vaatiiko se alt-tekstin? Käytetäänkö sitä toistuvasti eri sivuilla? Päivitetäänkö sitä usein? Onko siitä väri- tai kokoversioita? Vastaukset määrittävät sprite-suunnitelman. Sisältömerkityksen omaavia kuvia ei pidä sisällyttää spriteen SEO:n ja saavutettavuuden vuoksi.

2. Suunnittele sprite-kuva

Toisessa vaiheessa suunnittele ikonien asettelu. Samankokoisten ikonien sijoittaminen vierekkäin tai allekkain helpottaa koordinaattien hallintaa. Jos käytössä on eri kokoja, kuten 24x24, 32x32 ja 48x48, ryhmittele ne eri riveille selkeyden vuoksi. Jätä ikonien väliin 2–4 pikselin tyhjää tilaa estämään taustan vuotaminen väärään kohtaan.

Sprite-tiedostolle PNG on yleensä sopiva valinta; jos läpinäkyvyyttä tarvitaan, PNG-24 on suositeltava. Valokuvamaisissa pikkukuvissa WebP voi olla harkinnan arvoinen, mutta CSS background-positionin kanssa on huomioitava selaintuki ja varavaihtoehdot. SVG-ikoneille rasterispriten sijaan SVG-sprite on usein tehokkaampi.

3. Luo sprite-tiedosto

Voit luoda sprite-tiedoston manuaalisesti esimerkiksi Figmalla, Photoshopilla tai Affinity Designerilla. Laajemmissa projekteissa sprite-generaattorin lisääminen build-prosessiin on järkevämpää. Kun lähdeikonit sijoitetaan tiettyyn kansioon ja koontivaiheessa tuotetaan automaattisesti sprite-kuva ja CSS-tuloste, ylläpitokustannukset pienenevät.

Nimeä luotu tiedosto kuvaavasti. Esimerkiksi ui-sprite-v1.png kertoo sekä tiedoston tarkoituksen että version. Kun uusia ikoneita lisätään, tiedostonimen vaihtaminen muotoon ui-sprite-v2.png on käytännöllinen välimuistin rikkomisen kannalta. Vaihtoehtoisesti voit käyttää build-järjestelmää, joka lisää nimeen hash-arvon.

4. Kirjoita CSS-luokat

Peruskäyttöä varten voidaan määrittää yksi yhteinen luokka ja jokaiselle ikonille oma sijaintiluokkansa. Yhteisessä luokassa määritetään esimerkiksi background-image: url(/assets/ui-sprite.png); background-repeat: no-repeat; display: inline-block;. Kullekin ikoniluokalle määritetään width, height ja background-position.

Esimerkkilogiikka on seuraava: .icon-search-luokka saa leveydeksi ja korkeudeksi 24px, ja background-position-arvoksi 0 0. .icon-user-luokassa sijainti on -24px 0, .icon-cart-luokassa -48px 0. Näin kolme ikonia näytetään yhdestä tiedostosta. Tässä esimerkissä tiedostojen määrä putoaa kolmesta yhteen; isoissa projekteissa hyöty voi olla paljon suurempi.

Retina- tai korkean pikselitiheyden näytöille voidaan valmistella 2x-sprite. Esimerkiksi ikonin CSS-koko on 24x24, mutta spritessä oleva todellinen kuva on 48x48. Tällöin background-size-ominaisuudella koko sprite skaalataan CSS-pikseleihin. Näin vähennetään sumeutta korkearesoluutioisilla näytöillä.

5. Huomioi semanttinen käyttö HTML:ssä

Jos spriten avulla näytettävät ikonit ovat koristeellisia, voidaan käyttää tyhjää tai piilotettua tekstistrategiaa. Jos ikoni on painikkeen ainoa näkyvä sisältö, ruudunlukijoille on tarjottava merkityksellinen teksti. Esimerkiksi pelkästä ostoskorikuvakkeesta koostuvassa painikkeessa on oltava saavutettava nimi, kuten Siirry ostoskoriin. CSS-spritet parantavat suorituskykyä, mutta saavutettavuudesta ei pidä tinkiä.

Sama periaate pätee SEO:hon. Älä piilota spriteen tuotekuvia, infografiikoita tai artikkelikuvia, joiden halutaan näkyvän Googlen kuvahaussa. Tällaisille kuville tulee käyttää img-elementtiä, oikeaa alt-tekstiä, leveys- ja korkeusarvoja sekä lazy loadingia. Spritet on tarkoitettu ensisijaisesti käyttöliittymäkerrokseen.

6. Määritä välimuisti ja pakkausasetukset

Jotta sprite-tiedostosta saadaan täysi hyöty, palvelinpuolen välimuistiotsikot on asetettava oikein. Pitkään muuttumattomille sprite-tiedostoille voidaan määrittää pitkä välimuistin voimassaoloaika. Kun tiedosto muuttuu, nimen tai hash-arvon vaihtaminen varmistaa, että käyttäjä lataa uuden version. Tämä lähestymistapa auttaa selainta hyödyntämään välimuistia samalle sprite-tiedostolle toistuvilla vierailuilla.

Gzip tai Brotli ovat tehokkaampia tekstipohjaisille tiedostoille; kuvat pakataan omissa formaateissaan. Siksi PNG-optimointityökalut, WebP/AVIF-arviointi ja CDN-välimuististrategia on huomioitava yhdessä. Hostragonsin infrastruktuurissa sivuston nopeutta tukevia välimuisti- ja julkaisukäytäntöjä varten voidaan hyödyntää linkkejä wordpress-hosting, CDN-palvelu ja sivuston nopeutusopas.

Esimerkkiskenaario: 40 pyynnöstä 6 pyyntöön

Tarkastellaan realistista esimerkkiä. Yrityssivustolla on ylävalikossa 10 ikonia, alatunnisteessa 8 some- ja yhteystietoikonia, ominaisuuslaatikoissa 12 pientä symbolia, lomakekentissä 6 tilakuvaketta ja maksualueella 4 logoa. Yhteensä 40 pientä kuvatiedostoa ladataan. Vaikka jokainen olisi keskimäärin 2 kt, kokonaiskuvakoko näyttää olevan 80 kt; mutta 40 erillistä pyyntöä aiheuttaa tarpeetonta verkkokuormaa erityisesti ensikäynnillä.

Jakamalla nämä tiedostot neljään ryhmään ne voidaan muuntaa kahdeksi sprite-tiedostoksi ja muutamaksi erilliseksi kriittiseksi SVG-tiedostoksi. Lopputuloksena 40 kuvapyyntöä voi pudota 6 pyyntöön. Jos oletetaan, että jokainen pyyntö aiheuttaa verkko- ja selainpuolella keskimäärin 20–40 ms lisäkustannuksen, hitailla mobiiliyhteyksillä voidaan saavuttaa tuntuva parannus. Hyöty ei ole sama jokaisessa projektissa, minkä vuoksi mittaus ennen ja jälkeen on välttämätöntä.

Tässä on huomioitava, ettei kokonaistiedostokoko kasva. Jos optimoimaton sprite-tiedosto, jossa on turhia tyhjiä tiloja, onkin 220 kt 80 kt:n sijaan, suorituskyky voi heikentyä, vaikka pyyntöjen määrä vähenee. Onnistunut optimointi pitää pyyntöjen määrän pienenä ja samalla kokonaissiirtokoon ja kuvien käsittelykustannukset tasapainossa.

Vaikutus Core Web Vitals -mittareihin

CSS-spritet eivät yksinään nosta Core Web Vitals -pisteitä ihmeellisesti, mutta oikein käytettynä ne tukevat mittareita. Pienempi pyyntömäärä voi auttaa kriittisten resurssien nopeammassa latauksessa. Tämä voi hyödyttää epäsuorasti erityisesti Largest Contentful Paint- ja First Contentful Paint -mittareita. Lisäksi verkkokuorman vähentyessä JavaScript-, CSS- ja fonttitiedostojen lataukseen vapautuu enemmän resursseja.

Cumulative Layout Shiftin kannalta on tärkeää määrittää ikonien mitat tarkasti CSS:ssä. Jos sprite-ikonille ei aseteta width- ja height-arvoja, sivun asettelu voi heittelehtiä latauksen aikana. Siksi jokaisessa ikoniluokassa näkyvän alueen koko on määritettävä tarkasti. Interaction to Next Paintin osalta tarpeettoman verkkokuorman vähentäminen voi tuoda tasapainoisemman ensilatauskokemuksen.

Mittaamiseen voidaan käyttää Lighthousea, PageSpeed Insightsia, WebPageTestiä ja Chrome DevToolsia. Testejä ei pidä ajaa vain kerran, vaan vähintään 3–5 toistoa. Mittaa ensikäynnin ja toistuvien käyntien skenaariot erikseen. Testaaminen mobiiliyhteyden kuristuksella antaa todellisempaa kuvaa käyttäjäkokemuksesta.

Yleisimmät virheet CSS-spritejä käytettäessä

Vaikka sprite-tekniikka vaikuttaa yksinkertaiselta, väärin toteutettuna se voi aiheuttaa ylläpitotaakkaa ja suorituskykyongelmia. Yleisin virhe on laittaa kaikki kuvat yhteen valtavaan sprite-tiedostoon. Tällöin käyttäjä joutuu lataamaan kaikki sivuston ikonit vain nähdäkseen yhden alatunnisteessa käytetyn kuvakkeen. Parempi lähestymistapa on luoda pieniä ja järkeviä sprite-ryhmiä käyttökontekstin mukaan.

• Sisältökuvien sisällyttäminen spriteen ja alt-tekstin tarpeen sivuuttaminen.
• Matalaresoluutioisen spriten käyttö Retina-näytöille.
• Sprite-tiedoston julkaisu ilman optimointia.
• Koordinaattien manuaalinen hallinta ilman dokumentointia.
• Välimuistin rikkomisstrategian puuttuminen tiedoston muuttuessa.
• Vain yhdellä sivulla käytettyjen ikonien latauttaminen koko sivustolle.
• Spritejen käyttö vanhasta tottumuksesta arvioimatta HTTP/2:ta ja moderneja SVG-vaihtoehtoja.

Välttääksesi nämä virheet käsittele sprite-päätöstä osana suorituskykybudjettia. Jos sivulla on alle 15 kuvapyyntöä ja tiedostot on välimuistitettu hyvin, CSS-spritet eivät välttämättä ole tarpeen. Mutta hallintapaneelissa, jossa on 50–100 pientä ikonia, sprite- tai SVG-sprite-lähestymistapa voi tuoda merkittävän eron.

Huomioitavaa hostingin, CDN:n ja SSL:n kannalta

Frontend-optimoinnit tuottavat paremman tuloksen yhdistettynä vahvaan ja oikein konfiguroituun hosting-infrastruktuuriin. HTTP-pyyntöjen vähentäminen CSS-spritellä on tärkeä askel, mutta jos palvelimen vasteaika on korkea, SSL-kättely hidas tai välimuistiotsikot puutteelliset, hyöty jää rajalliseksi. Siksi suorituskykyä on tarkasteltava kokonaisvaltaisesti.

Hyvässä hosting-ympäristössä staattiset tiedostot tarjoillaan nopeasti, HTTP/2- tai HTTP/3-tuki on olemassa, TLS-konfiguraatio on ajan tasalla ja välimuistikäytäntöjä voidaan hallita. Hostragonsin ratkaisuissa oikean paketin valinta sivustotyypin mukaan, CDN-integraatio ja SSL-asennus voivat olla osa suorituskykysuunnitelmaa. Tässä yhteydessä linkkejä verkkotunnuksen haku, yrityshosting, SSL-sertifikaatti ja sivuston siirto voidaan käyttää luontevasti sisällössä.

Lisäksi jos sprite-tiedostoja tarjoillaan CDN:n kautta, välimuistin mitätöintiprosessi on määriteltävä selkeästi. Jos CDN jatkaa vanhan tiedoston tarjoilua päivityksen jälkeen, uudet ikonit eivät välttämättä näy tai koordinaatit menevät sekaisin. Hash-pohjainen tiedostonimeäminen ratkaisee tämän ongelman pitkälti.

Toteutuksen tarkistuslista

Alla oleva tarkistuslista auttaa tekemään nopean auditoinnin ennen CSS-sprite-työn julkaisua. Erityisesti jos tiimissä työskentelee yhdessä kehittäjä, suunnittelija ja SEO-asiantuntija, tämä lista voi tarjota yhteisen laatustandardin.

• Ovatko spriteen sisällytettävät kuvat koristeellisia tai käyttöliittymälähtöisiä?
• Onko sisältökuvat, tuotekuvat ja SEO-arvoa omaavat kuvat jätetty erilleen?
• Onko sprite-tiedosto optimoitu ja turhat tyhjät tilat poistettu?
• Ovatko jokaisen ikonin width-, height- ja background-position-arvot oikein?
• Onko korkean resoluution näytöille suunniteltu background-size?
• Onko välimuistin kesto, tiedostojen versiointi tai hash-strategia määritetty?
• Onko HTTP-pyyntöjen määrä mitattu ennen ja jälkeen?
• Onko Lighthouse- ja oikeiden laitteiden testit suoritettu?
• Onko painikkeille ja linkeille tarjottu tekstivastine saavutettavuutta varten?

Yhteenveto

CSS-sprite-tekniikalla HTTP-pyyntöjen vähentäminen on oikeassa skenaariossa yhä toimiva ja sovellettavissa oleva verkkosuorituskyvyn menetelmä. Erityisesti sivustoilla, jotka käyttävät paljon pieniä käyttöliittymäkuvia, se vähentää pyyntöjen määrää, parantaa välimuistin tehokkuutta ja tarjoaa hallitumman staattisten tiedostojen hallinnan. Nykyaikaisessa web-kehityksessä tätä tekniikkaa ei kuitenkaan pidä käyttää sokeasti, vaan sitä on verrattava SVG-spriteen, inline-SVG:hen, HTTP/2:een, CDN:ään ja välimuististrategioihin.

Lyhyesti: mittaa ensin, valitse sopivat kuvat, valmistele optimoitu sprite-tiedosto, määritä CSS-koordinaatit oikein, tee välimuistiasetukset ja testaa tulos uudelleen. Jos haluat tukea verkkosivustosi suorituskykyä vankemmalla infrastruktuurilla, voit tutustua Hostragonsin hosting-, verkkotunnus- ja SSL-ratkaisuihin ja arvioida projektiisi sopivan konfiguraation ilman myyntipainetta.

Usein kysytyt kysymykset

Onko CSS-sprite-tekniikka yhä tarpeellinen vuonna 2026?

Kyllä, mutta ei jokaisessa projektissa. Sivustoilla, joilla on paljon pieniä bittikarttaikoneita, CSS-spritet voivat yhä vähentää HTTP-pyyntöjä. Jos ikoneita on vähän, HTTP/2-infrastruktuuri on vahva tai käytössä on SVG-pohjainen design-järjestelmä, vaihtoehtoiset menetelmät voivat olla sopivampia.

Tuovatko CSS-spritet suoraa hyötyä SEO:lle?

Suoraa sijoitusparannusta ne eivät takaa, mutta ne voivat epäsuorasti tukea SEO-suorituskykyä parantamalla sivun nopeutta ja käyttökokemusta. Sisältömerkityksen omaavia kuvia ei pidä sisällyttää spriteen, vaan ne on tarjottava img-elementillä ja alt-tekstillä.

Pitäisikö sprite-tiedoston olla PNG vai SVG?

Bittikarttaikoneille PNG-sprite on yleinen ja yhteensopiva. Vektori-ikoneille SVG-sprite on yleensä joustavampi, terävämpi ja skaalautuvampi ratkaisu. Valinta tulee tehdä kuvatyypin ja design-järjestelmän perusteella.

Parantavatko CSS-spritet Core Web Vitals -pisteitä?

Oikein toteutettuna ne voivat epäsuorasti tukea Core Web Vitals -mittareita vähentämällä erityisesti ensilatausaikaa ja verkkokuormaa. Palvelimen vasteaika, kuvakoko, JavaScript-kuorma ja välimuistiasetukset on kuitenkin optimoitava samanaikaisesti.

Mikä on suurin virhe CSS-spritejä käytettäessä?

Suurin virhe on laittaa kaikki kuvat yhteen suureen sprite-tiedostoon ja sisällyttää siihen myös sisältökuvat. Sprite-tiedostot tulee ryhmitellä käyttökontekstin mukaan, optimoida ja noudattaa saavutettavuussääntöjä.