Bildeoptimalisering — slik gjør du nettsiden raskere uten å miste kvalitet

På de fleste små bedriftssider er bildene det tyngste på siden — ofte tyngre enn all teksten og koden til sammen. Det gode er at dette er den enkleste tregheten å fjerne, og du trenger ikke en utvikler for å forstå hvordan.

Hvorfor bilder gjør sider trege

Et bilde rett fra mobilkameraet kan være fire eller fem megabyte. Lagt rett på nettsiden må besøkeren laste ned hver eneste byte før bildet vises — også på mobilnett, også når de bare er innom for å finne telefonnummeret ditt.

Et bilde som er optimalisert for nett, kan gjøre den samme jobben på en tiendedel av størrelsen. Forskjellen er sjelden synlig for øyet, men godt synlig i lastetiden.

De tre tingene som faktisk betyr noe

Du trenger ikke kunne alt om bildeformater. Tre grep tar deg det meste av veien:

• Riktig størrelse i piksler. Et bilde som vises 600 piksler bredt på skjermen, trenger ikke være 4000 piksler bredt. Skaler det ned før du laster det opp.
• Komprimering. Komprimering fjerner data øyet ikke merker. En kvalitet på rundt 80 prosent ser likt ut, men veier langt mindre.
• Moderne format. Formater som WebP og AVIF gir samme kvalitet som JPEG og PNG på betydelig mindre plass. De fleste nettlesere støtter dem nå.

Gjør du bare disse tre, har du som regel løst problemet.

Velg riktig format til riktig bilde

Det er ingen fasit som passer alt, men en enkel tommelfingerregel hjelper:

• Fotografier (folk, produkter, lokaler): WebP eller JPEG.
• Logoer og ikoner med skarpe kanter: SVG der det er mulig, ellers PNG.
• Grafikk med få farger: PNG eller SVG.

Hovedpoenget er å unngå å lagre et stort fotografi som PNG — da blir filen unødvendig tung uten at kvaliteten blir bedre.

La bilder lenger nede vente

Et triks som koster lite og hjelper mye, heter «lazy loading». I praksis betyr det at bilder lenger nede på siden ikke lastes før besøkeren scroller dit. Siden føles raskere fordi den bare henter det som faktisk er på skjermen.

De fleste moderne nettsideverktøy gjør dette automatisk. Bruker du WordPress eller et lignende system, er det ofte bare en innstilling som må stå på.

Husk alt-tekst — for både folk og Google

Hvert bilde bør ha en kort, beskrivende alt-tekst. Den brukes av skjermlesere for synshemmede, og den hjelper Google å forstå hva bildet viser. Skriv det du faktisk ser: «Rørlegger monterer varmtvannsbereder» er bedre enn «bilde1». Ikke fyll den med søkeord — beskriv bildet ærlig.

Slik kommer du i gang i dag

Du trenger ikke gjøre alt på en gang. En enkel rekkefølge:

1. Finn de tyngste sidene dine — forsiden og de mest besøkte landingssidene først.
2. Last ned bildene, skaler dem til riktig bredde, og komprimer dem med et gratis verktøy.
3. Last dem opp på nytt, og sjekk lastetiden før og etter.

Allerede etter de viktigste sidene vil du som regel se en målbar forbedring.

Det henger sammen med resten

Bildeoptimalisering er ett av flere grep som påvirker hvor raskt og hvor høyt siden din vises. Det henger tett sammen med hvorfor fart påvirker rangering og med å unngå vanlige tekniske feil. Tar du bildene først, har du tatt den enkleste og mest synlige delen.

Lette bilder er ikke et mål i seg selv — de er bare en av de korteste veiene til en side folk gidder å bli værende på. Vil du vite hvor mye dine egne bilder bremser deg, kan du ta en prat med oss.