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 Strømnes Bøe er administrerende direktør i RED Performance. Han er også partner i selskapet.