CSS-sprites – kombinerte bilder reduserer serverbelastningen
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