Hvordan komprimere bilder for nettsider

Du må optimalisere og komprimere bilder du laster opp til nettsiden din. Ellers risikerer du å miste lesere før de har kommet seg inn på siden din.

Bilder spiller en viktig rolle på nettsider!

  • Som blikkfang.
  • Til å bryte opp tekst.
  • Som illustrasjon av et viktig poeng.
Å komprimere bilder er superviktig for å få en rask nettside.

Men siden det er nerden som skriver her nå, så har du sikkert skjønt at det er et lite teknisk aspekt ved det å bruke bilder på nett også. Jeg er ingen stor helsefreak vanligvis, men når det gjelder websider så er jeg opptatt av god helse.

Og i motsetning til vanlige sykdommer, så kan ikke webproblemer kureres med frisk luft og trening.

En ting som er veldig viktig på nettsiden din er….

…å komprimere bilder før du laster dem opp på webhotellet!

Men hvordan gjøre bilder mindre?

Er du fotograf, så har du sikkert et program du kan bruke til å lagre bilder for web. Photoshop for eksempel, har en egen “Lagre for web” funksjon, som gir deg full kontroll over kvalitet og størrelse. Du kan også bruke en batch funksjon til å nedskalere mange bilder på en gang.

Men, greia er jo det, at de fleste hverken kan eller vil bruke tid på å fikle med bilder. Man vil bare få dem opp på bloggen så fort som mulig.

Og løsningen er….utvidelser, eller plugins. Jeg vet at jeg har lovt at all opplæring på WP Skolen skal være på norsk, men jeg synes plugin er et bedre ord. Ok?

Er du webdesigner, så spør kunden din hva hun/han kan om optimalisering av bilder. Ser de ut som et spørsmålstegn? Da bør du få på plass en plugin til å komprimere bilder før de ødelegger nettsiden sin 😉

Installer en plugin før du overlater websiden i kundens hender!

Hvorfor er det så viktig å komprimere bilder?

Dagens digitalkameraer, og ikke minst telefoner, tar bilder av god kvalitet og produserer bilder som er gode nok til store utskrifter. Men det gjør at bilder du laster rett opp til websiden fort kan bli 15-20 MB store.

Det gjør at plassen på webhotellet ditt fylles opp i rekordfart, helt unødvendig. Man trenger nemlig ikke svære, høyoppløslige bilder for å vise dem på en webside. Det er rett og slett direkte skadelig for nettsiden din! Derfor MÅ du komprimere bilder du skal bruke på nettsiden din.

LES MER: Om bruk av bilder på nett

Store bildefiler kan også skape problemer ved kjøring av backup(sikkerhetskopi)

Mange tenker ikke på at de trenger ledig plass på webhotellet for å få kjørt en full backup. Hvis man bruker en backupmetode som zipper filene vel og merke. Så om websiden din er på 500MB, så trenger du et webhotell på 1GB for å få plass til en backupfil.

De fleste webhotell har også en begrensning på hvor lang tid du kan bruke på å kjøre en backupfil og så overføre den til en annen server. Og hva skjer da? Jo, da vil backupfila bli liggende på webhotellet ditt, og kapasiteten er sprengt. I beste fall blir websiden din treg, i verste fall går den ned.

Har jeg fått fram poenget? Jeg håper det!

Så hvordan løser vi problemet, før det egentlig har blitt et problem?

Det finnes flere plugins som løser dette med å komprimere bilder for deg. Både gratis plugins og noen du må betale for. Her er noen eksempler:

Her kan du optimalisere 20MB gratis pr mnd, trenger du mer så må du betale litt.
Her får du en gratis prøveperiode, deretter fra $5 USD pr mnd.
Denne er helt gratis og superenkel å bruke, men gjør kanskje ikke like god jobb som de to andre.

Hvordan WordPress håndterer bilder

Her er et skjermbilde av media innstillingene jeg har på websiden jeg bruker som eksempel i både gratiskurset i WordPress, og i WP Basis.

Eksempler på media innstillinger i WordPress

WordPress laster opp orginalfila(den som ikke skal være 20 MB!!) + tre versjoner til av bildet. En stor, en medium og en kvadratisk miniatyr. Det gjør WordPress nettopp fordi du ikke skal behøve å bruke den fila…som ikke er 20 MB stor 🙂

Da vil det ta år og dag før siden med bildet lastes inn.

Bildestørrelse før og etter installering av plugin

Innstillinger for resize image after upload

Når du har installert en plugin, så må du som regel konfigurere den. Les brukerveiledningen til den du har valgt.

Du kan velge hvor stort du vil at orginalbildet skal være, og om f.eks PNG filer skal konverteres til JPG og evt. WebP format. WebP er et ganske nytt format som ikke støttes av alle nettlesere enda. Men det kommer nok mer og mer, og der gjør Imagify en veldig god jobb.

Det er sjelden du trenger bilder som er mer enn 1600px brede/høye. Det må i såfall være bakgrunnsbilder i fullskjermmodus, men da kan du alltids nedskalere på andre måter, eller justere innstillingen før du laster opp den type bilder.

Hvis du ønsker å laste opp større bilder enn det du har valgt i innstillingene, så må du deaktivere plugin midlertidig. Ellers vill det uansett bli nedskalert til den størrelsen du har satt. Skjønner?

Under ser du et eksempel på hva jeg mener. Jeg lastet opp dette bildet, FØR jeg installerte “Resize Image After Upload”. Og her er orginalfila nesten 20 MB. Det er katastrofalt stort for en nettside!

Etter installering av “Resize images after upload” plugin og optimalisering av bildet, er samme bilde kun 295kb stort. Med Imagify eller Kraken ville det muligens vært enda mindre.

Installer en plugin som kan nedskalere og komprimere bilder for deg uten at du trenger å løfte en finger.

Og websiden din vil holde seg sunn og frisk mye lengre!

Uten frisk luft og turer i marka 🙂

Kristin Skjæringrud
Kristin Skjæringrud

Kristin Skjæringrud er "rektor" på WP Skolen og mener at WordPress kan brukes til (nesten) alt. Men først og fremst til å bygge nettsider med ;-)

Artikler: 143

2 kommentarer

  1. Hei

    Jeg har en nettside som heter tureventyret.no. Det ser ut som jeg har et kapasitetsproblem fordi jeg er helt ny innen
    blogging og har skjønt at det er bildene som gjør at jeg har brukt opp plassen min på webhotellet. Nå kommer jeg ikke inn på siden min og får retten det opp. Har du noen tips til hvordan jeg kan redde siden og komme inn og skalere bildene så de blir mindre?

    Feilmeldingen sier:Service Unavailable

    The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later.

    Additionally, a 503 Service Unavailable error was encountered while trying to use an ErrorDocument to handle the request.

    • Hei Monica!
      Jeg tror ikke dette har noe med kapasitetsproblemer på ditt webhotell å gjøre, med mindre du har fått en e-post som sier at du faktisk har sprengt kapasiteten på webhotellet ditt. En 503 melding skyldes normalt et midlertidig serverproblem og vil i de fleste tilfeller rettes i løpet av kort tid, uten at du trenger å gjøre noe. Men om du faktisk har fått en melding om at kapasiteten er sprengt, da må du finne ut hva som er årsaken. Jeg ser du har webhotell hos ProIsp, da har du også fått tilgang til cPanel hos dem. Der kan du logge inn og klikke på “Disk usage”. Da vil du se hvor mye diskplass du har brukt. Hvis du f.eks har et “Start” webhotell med 1GB lagringsplass, og du ser at “uploads” mappen(ligger normalt i public_html -> wp-content) har brukt 999MB lagringsplass, så kan det som du sier skyldes bilder. Men det kan også være andre årsaker. En av de vanligste årsakene er backupfiler som ikke overføres til ekstern server(som igjen kan skyldes en full Dropbox konto el.l.).

      Generelt når det gjelder nedskalering og optimalisering av bilder, så kan det være lurt å installere en plugin som gjør den jobben for deg. Imagify er f.eks et greit alternativ.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *

Dette nettstedet bruker Akismet for å redusere spam. Lær om hvordan dine kommentar-data prosesseres.