CSS-sprites er betegnelsen på teknikken for å slå sammen bilder for å redusere antall serverforespørsler.

I bildet over ser du hvordan Google bruker teknikken på sine resultatlister.
Stjerneikonet for 5 stjerner hentes fra en stor fil med alle de små ikonbildene som brukes i Googles resultatlister.

Teknikken er effektiv når du har mange små objekter på et nettsted, som brukes på mange sider – malverkselementer er typiske kandidater til dette.

Ved å ta i bruk CSS-sprites får du:

• Raskere nettsted
• Redusert serverbelastning

Eksempel: NSB.no – 20 bilder blir 1

Nettstedet er bygget opp av blant annet mange bilder, 20 av disse bildene er veldig små og bør kombineres:

Nettlesere har en grense for hvor mange forespørsler som kan sendes samtidig, de mest simple kan kun sende 6 om gangen. Så for bare å laste disse småbildene må nettleseren snakke 4 ganger med serveren. Dette øker tiden det tar før siden vises og øker belastningen på serveren.

Ved å slå sammen disse bildene til en fil og bruke CSS til å hente ut ønsket utsnitt blir 20 serverkall om til ett og lastetiden forbedret.

Bruk CSS for å hente frem riktig utsnitt

For å hente inn bildet lastes bildet inn via CSS, fremfor HTML.

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

For å velge hvilken del av bildet som skal vises, angis dette via klasser i stilarket.

.sprite-nsb-arrow-right-grey{ background-position: 0 0; width: 4px; height: 7px; }

Koden over viser utsnittet for det øverste bildet – den grå pilen som peker mot høyre:

.sprite-nsb-bicycle{ background-position: 0 -8px; width: 18px; height: 18px; }

Koden over viser utsnittet for sykkelen:

Verktøy for å ta i bruk CSS-sprites

For å generere koden har jeg brukt webapplikasjonen CSS Sprite Generator og for å hente ut bilder har jeg brukt Googles PageSpeed Insights

Av Magnus Strømnes Bøe

Skrevet av Magnus Strømnes Bøe

Magnus har over ti års erfaring fra søkemotormarkedsføring og regnes som en av landets mest kunnskapsrike på området. Han er faglig ansvarlig for søkemotoroptimalisering og sørger for at våre kunder oppnår maksimale resultater fra organisk søk.