Hvor ”tunge” bør bilder på nett være?

Oppdatert: 1. februar 2019

Hastighet er en viktig rankingfaktor i søkesynlighet – du blir mindre synlig på Google hvis siden din er treg.

Bildebruken på nett har bare økt de siste årene. Vi bruker flere bilder enn før på nettstedene våre, og de er både større og tyngre enn før. I 2012 nådde den gjennomsnittlige størrelsen på en nettside 1Mb. I 2015 hadde dette doblet seg til 2Mb. I 2017 var gjennomsnittsstørrelsen 3Mb. Mer enn 65% av dette er bilder.

Tregere sider betyr færre konverteringer

Når sidestørrelsen øker, øker også lastetiden. Dette fører til at brukeren lett kan bli sittende utålmodig og vente på at siden skal laste ferdig. Når vi i tillegg vet at rask lasting av siden og antall konverteringer gjerne henger sammen, blir dette noe vi kan kjenne på bunnlinjen. Man anslår at en økning i nedlastningstid på bare 1 sekund kan medføre 7% færre konverteringer, og 11% færre sidevisninger. 47% av brukere forventer at nettsider lastes på 2 sek. eller raskere.

Det er mye vi kan gjøre for å sørge for at siden vår laster så raskt som mulig, men først må vi finne ut hvordan det står til. Det finnes et par gode verktøy for å finne nettstedshastigeten:

Google PageSpeed Insights

Test My Site with Google

Disse to verktøyene gir ikke bare tilbakemelding på hastigheten – de kommer også med innspill på hva det er som er problemet, og hva du kan gjøre for å løse det.

Ting som kan gjøre nettstedet ditt langsommere:

  • Dårlig ytelse på server
  • Javascript
  • Bilder

Bilder er det som er lettest å gjøre noe med på egen hånd og som har høyt besparingspotensial.

Ta hensyn til mobil

En annen grunn til å redusere tyngden på bildene dine er mobilbrukerne. Allerede i 2014 var det fler som gikk på nett med mobil enn med desktop, og trenden har bare akselerert. Dermed er vi ikke bare nødt til å ta hensyn til mobilbrukerne, men vi må ta hensyn til dem først av alle. Googles Mobile First Indexing gjelder – det er altså mobilversjonen av siden som indekseres.

Mobilbrukerne har ikke luksusen av store skjermer og superraskt bredbånd, faktisk kommer 70% av alle mobilnettverk i verden til å ha 3G-hastighet eller lavere ut 2020. I tillegg har mange brukere begrensninger på datamengden de kan laste ned pr. måned. Da blir det ekstra viktig å sørge for at sidene er raske, også på mobil.

Ting du kan gjøre:

  • Velg riktig grafikkformat (GIF, JPEG, PNG)
  • Ikke gjør bildet det større i høyde og bredde enn du må.
    NB: IKKE nedskaler i nettleser – dette gir bare et tilsynelatende mindre bilde, men filstørrelsen er den samme.
  • Prioriter bildekvaliteten. Mindre viktige bilder kan komprimeres mer.

Riktig grafikkformat

De viktigste grafikkformatene på web er GIF, JPEG og PNG. Alle disse er såkalte komprimerte formater, slik at bildene skal bli så lette som mulig. De egner seg imidlertid til litt forskjellig bruk:

  • Trenger du enkel grafikk med en liten fargepalett? Velg PNG-8.
  • Trenger du animasjon? Velg GIF.
    Dette er nå den eneste grunnen til å velge GIF over PNG-8. (PNG-8 komprimerer bedre med fargepaletter <256).
  • Trenger du å gjengi skarpe detaljer med høy oppløsning? Velg PNG-24.
  • Trenger du minst mulig filstørrelse og bildekvaliteten ikke er kritisk – velg JPG.
    Eksperimenter med innstillinger. Kvalitetsinstilling på 80 eller lavere er fint for web.

Tenk på hele sidestørrelsen

Hele siden bør ikke overstige 1,5 Mb. Hvis 65% av dette er bilder, vil bildene utgjøre ca. 975 Kb. Hvis man deler dette på antall bilder på siden, finner man en gjennomsnittstyngde som bildene bør ha. Har man f. eks. 5 bilder på siden, bør gjennomsnittstyngden på et bilde være ca. 195 Kb. Det gjør naturligvis ingenting om det er mindre enn dette. I prinsippet kan man si at jo lettere siden er, jo bedre er det.

Sett en maksgrense for bildetyngde på nettsiden din

Dette er  først og fremst fordi det er en enkel retningslinje å etablere og kontrollere, og derfor er med å sikre at alle som er involvert i arbeidet med innholdet på nettsidene arbeider etter samme standard når det gjelder bilder. Her kan man også bruke regnestykket ovenfor som et utgangspunkt, og i tillegg kutte f. eks. 10-20% for å være på den sikre siden.

Det er mange faktorer som bestemmer både faktisk og opplevd hastighet på en nettside. Vi anbefaler imidlertid at man utfører bildeoptimalisering før man ser på mer kostnadskrevende tekniske løsninger, da bildeoptimalisering både er kosteffektivt, enkelt å gjøre selv, og kan utgjøre en reell forskjell i hastigheten på nettsidene dine.

Verktøy

Adobe Photoshop: Bildebehandlingsprogram som lar deg konvertere mellom formater og optimalisere grafikk.

Optimizilla: Nettbasert tjeneste som lar deg optimalisere JPEG- og PNG-bilder. Du kan optimalisere opp til 20 bilder samtidig.

Kraken: Nettbasert tjeneste som lar deg optimalisere GIF, JPEG- og PNG-bilder. Kan importere og eksportere til Dropbox. Har også en betalt versjon som lar deg skalere og beskjære bilder.

reSmush.it: Plug-in for WordPress, som komprimerer bilder du laster opp automatisk, og som også kan komprimere bilder som allerede befinner seg på nettstedet ditt.

 

Har du lyst til å lære mer? – Vi i Webgruppen har en rekke kurs om webkommunikasjon og digital marketing.

 

 

 

 

 

 

Handlekurv