Hvordan komprimere bilder på nettsiden din

At gode bilder på nettsiden din er viktig for at besøkende skal bli fristet og inspirert til å besøke din bedrift vet vi alle. Men visste du at HVORDAN du legger inn bildene også har betydning for hvor godt siden din fungerer og hvor godt synlig den blir på Google? Her er noen tips til hvordan du komprimerer bilder til bruk på nettsider.
Illustrasjonsbilde: Bildebehandling til nettsider

  1. Sjekk hvor tunge bildene på nettsiden er

    Først og fremst bør du sjekke om bildene du allerede har på nettsiden er for tunge. Hvis de er for tunge (i antall kb eller mb) vil de gjøre nettsiden tregere å laste, og da får du minuspoeng når Google ser på hvilke nettsider de skal presenteres øverst i søkeresultatene.
    En side på nett bør ikke bruke mer enn 4 sek på å laste (helst mindre) og bør ikke være tyngre enn 3 MB (helst mindre) .

    Bruk Google Page Speed Insight for å finne ut hvor tunge hvert enkelt bilde på nettsiden er. Tjenesten er gratis.

    Page Speed Insights - illustrasjonsbilde

    Når du trykker analysér, får du opp mye informasjon (som du vil forstå mer eller mindre av) om hva som kan gjøres for å få siden din til å laste raskere.
    Tunge bilder er en typisk ting det kan være MYE å hente på.

    Bildestørrelser

    I resultatet du får opp på PageSpeed Insights, sjekk “Velg riktige bildestørrelser”; der får du opp hvilke bilder på akkurat denne siden som er tyngst.
    I eksempelet under ser du at ett bilde er på hele 2404 kb. Dette bildet kan komprimeres til rundt 100 kb uten at det nødvendigvis blir dårligere kvalitet for den som besøker nettsiden. Les mer om hvordan lengre nede i artikkelen.

    Det varierer litt hva som anbefales som maks tyngde på én side på nett; noen opererer med maks 3 MB mens andre anbefaler ned i maks 1,5 MB. På en gjennomsnittlig nettside vil kanskje bildene utgjøre 60-70 % av innholdet, og da kan du regne ut hvor tunge hvert av bildene dine kan være uten av det går ut over hastigheten. Har du mange bilder må hvert bilde være lettere enn om du har få bilder på siden. Du kan også kompromisse mer på kvaliteten på bilder som er små og ikke så viktige, enn feks på det ene store bildet som virkelig skal vise fram det viktigste du tilbyr.
    Illustrasjonsbilde Page Speed Insights - info om bildestørrelser

    Bildestørrelser forts. 

    Når vi snakker om bildestørrelser på nett, så snakker vi om også om antall pixler (bildepunkter) i bredde og høyde .
    Det er ingen fasit på hva som er anbefalt antall pixler på en nettside, men på ususno.temp312.kinsta.cloud prøver vi å laste opp bilder som er maks 1500 pixler bred (i liggende format). Da vises de skarpt på de aller fleste dataskjermer folk bruker nå, og de tar mindre plass enn hvis du laster opp råfiler direkte fra speilreflekskameraet eller mobiltelefonen for den saks skyld (der bildene gjerne er flere MB). Dette er imidlertid som regel ikke nok for å komprimere tyngden på bildet og da må man gjøre noen flere grep.

    Bildeformater

    Valg av bildeformater har også mye å si for tyngden på bildene.

    Jpeg: det mest vanlige og beste for foto dersom du er ute etter minst mulig filstørrelse til ok kvalitet
    Png: best til bilder som trenger sylskarp gjengivelse (feks med grafiske elementer i seg), men vær obs på at filene blir tyngre enn jpeg
    Gif: brukes stort sett nå bare til animasjoner

    Det er også kommet flere nye bildeformater som webp, heic og avif men det er ikke alle nettlesere som støtter disse enda, slik at det beste og enkleste foreløpig er å holde seg til formatene over.

     

  2. Velg metode for komprimering

    Dersom du har for tunge bilder er det ulike måter å jobbe med komprimering på.

    Automatisk komprimering av bilder direkte i publiseringsverktøyet

    Dersom du bruker feks wordpress eller andre åpne puliseringsverktøy til å lage og redigere nettsiden din, så finnes det såkalte plugins du kan legge inn som gjør jobben automatisk for deg. Da slipper du å tenke på om du laster inn for tunge bilder. Det er ikke alltid slike løsninger gir 100 % resultat. Men i de fleste tilfellene er det godt nok, og det er en svært arbeidsbesparende måte å gjøre det på. Med mindre du er teknisk erfaren med verktøyet, bør du få de som har laget nettsiden din til å legge inn dette for deg.

    Populære plugins som kan brukes både i WordPress, Drupal, Joomla, Magento mfl:

    – reSmush.it (Selve plugin er gratis i bruk, slik at du betaler kun for hjelpen du evt trenger til å installere/sette den opp riktig)
    – Smush Pro (koster bittelitt pr år)

    Komprimering av bilder FØR du legger de inn på nettsiden

    Dersom du ønsker å komprimere bildene før du laster de opp i publiseringsverktøyet ditt (hvis du ikke syns plugin komprimerer godt nok eller du ikke kan bruke plugin på ditt nettsted), så er det også et par alternativer.

    – Bruk en gratis online bildekomprimeringstjeneste for å komprimere mange bilder på en gang.
    Med feks Optimizilla kan du laste inn inntil 20 bilder om gangen og de komprimeres automatisk til minst mulig størrelse uten at det går ut over kvaliteten (ofte rundt 80% av tyngden). Effektivt og greit når du har mange bilder som skal komprimeres på en gang.
    – For full kontroll over bildestørrelse og tyngde bruk et bilderedigeringsverktøy som Adobe Photoshop (krever abonnement) eller Gimp (gratis).

 

Publisert mars 2020