CSS-sprites - Raskere nettsted med færre bilder
Vi rekrutterer! Se ledige stillinger
Du leser "CSS-sprites – kombinerte bilder reduserer serverbelastningen"

Tips en venn om "CSS-sprites – kombinerte bilder reduserer serverbelastningen"

Del siden via sosiale medier

Meld deg på nyhetsbrev fra RED Performance

  • Vi sender ut e-poster ca 1 gang per uke
  • Siste nytt fra bransjen og RED
  • Produktoppdateringer, tips og nyheter
  • How-to-guides

Betingelser for kursdeltakere

Påmelding

Påmelding er bindende.

Fakturering

Faktura sender etter kursdeltakelse med 20 dagers betalingsfrist.

Kansellering

Grunnet kort tidsfrist, faktureres eventuelle kanselleringer med 100% av kursprisen.

RED Gruppen

CSS-sprites – kombinerte bilder reduserer serverbelastningen

css-sprites

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:

Eksempel: NSB.no – 20 bilder blir 1

nsb-no-20121212

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

  1. sleep
  2. play
  3. mobile
  4. menu-login
  5. menu-arrow-grey
  6. laptop
  7. info
  8. icon-sitemap
  9. icon-language
  10. icon-calendar
  11. handicap
  12. food
  13. eletronic_ticket
  14. bicycle
  15. arrow-right-grey
  16. ticket
  17. time
  18. touchpoint-youtube-32x32
  19. train
  20. wifi

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.

nsb-sprites

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

Portrett 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.

Flere artikler…

RED Gruppen logo
Cookies / Informasjonskapsler