Hvordan optimalisere bilder for bruk på nett

Hvis du lagrer bildene dine feil har det stor påvirkning på nettstedets hastighet. Dessverre er det å optimalisere bilder for bruk på nett er en viktig oppgave mange slurver med.

Enhver ekspert i webdesign vil kunne fortelle deg at bruk av bilder på nettsiden din skaper mer engasjerte lesere.

Det mange ikke forteller deg, er at ikke-optimaliserte bilder vil redusere hastigheten på nettstedet dramatisk, gi lavere rangering i søkemotorer og redusert kunde- eller lesertilfredshet.

Dagens nettbrukere er utålmodige og de siste undersøkelsene viser at 40% av leserne forlater et nettsted som bruker mer enn 3 sekunder på å laste ferdig.

Lagre bilder i riktig format

Når du skal lagre bilder er det viktig å vurdere oppløsning, bildeformat og komprimering. Velger du riktig kombinasjon får du flotte bilder i høy kvalitet som samtidig er raske å laste inn for leseren.

De to mest brukte bildeformatene på nett er PNG og JPEG. Derimot er det ikke alltid like enkelt å vite hvilket format du bør bruke, eller når.

JPEG – Brukes når bildet har mye dybde og mange farger.
PNG – Brukes for transparente (gjennomsiktige) bilder, grafikk og bilder med få farger.

En enkel huskeregel er å bruke JPEG for bilder som har sitt opphav fra et kamera, og PNG for bilder som er laget på en datamaskin eller i hovedsak består av skrift eller tegning.

PNG -formatet har høy kvalitet og kan ikke komprimeres. Ulempen er om PNG -bilder inneholder mye data, da blir filen veldig stor. JPEG -formatet derimot, kan komprimeres. Det betyr at noe av kvaliteten ofres for å gjøre filen vesentlig mindre.

Når du skal optimalisere bilder for bruk på nett er det viktig å finne en balanse mellom kvalitet og størrelse. Ved å gjøre de riktige valgene kan du ofte redusere størrelsen dramatisk uten å miste synlig kvalitet.

Hvordan velge riktig oppløsning?

Oppløsning er et begrep som kan være vanskelig å forstå for nybegynnere. Det gjør det ikke noe enklere at begrepet ofte brukes feil både i mange forklaringer og sammenhenger.

I denne sammenhengen vi snakker om her, definerer begrepet oppløsning hvor mange piksler det er i et bilde.

Når man til eksempel sier at et bilde har en oppløsning på 1920×1080 piksler, betyr det at bildet er 1920 piksler stort i bredden og 1080 piksler stort i høyden.

For deg som bare vil optmalisere bilder for bruk på nett er det ikke så viktig å være ekspert på selve begrepet, men du trenger en viss forståelse for hvor stor oppløsning du bør bruke for bildene på nettsiden din.

Husk at det er ingen gevinst å velge for stor oppløsning. Samtidig kan bilder med for lav oppløsning være skjemmende.

Digitale kameraer lagrer ofte bilder i mye høyere oppløsning enn det som trengs for bruk på nett. Samtidig er det vanskelig å si hvilken oppløsning du bør bruke, da det varierer fra nettsted til nettsted.

Bildestørrelser i WordPress

Når du laster opp et bilde til nettsiden din vil WordPress automatisk lage kopier av originalbildet i flere ulike oppløsninger (også kalt cropping eller beskjæring).

Hvilke bildestørrelser eller oppløsning disse kopiene får er definert under Innstillinger > Media i WordPress kontrollpanel.

Som standard, er de forhåndsbestemte bildestørrelsene i WordPress slik:

Miniatyrbildestørrelse – 150×150 piksler
Medium størrelse – 300×300 piksler
Stor størrelse – 1024×1024 piksler
Full størrelse – Original bildestørrelse du lastet opp

Noen WordPress-temaer legger til flere størrelser enn det som er standard i WordPress.

Hvorfor optimalisere bilder (eksempel)

For å vise deg hvorfor du bør optimalisere bilder for bruk på nett har vi laget et praktisk eksempel under.

Det originale bildet i dette eksempelet er skatergirl-original.jpg som har en oppløsning på 6000×4000 piksler (24 megapiksler) og er 13136 kilobyte (12.8 megabyte) stort.

Ved å bruke verktøyene Adobe Photoshop og JPEGOPTIM har vi komprimert det originale bildet, uten å endre den originale oppløsningen. Som du kan se fra tabellen under har vi med enkle grep redusert størrelsen dramatisk.

[go_pricing id=»optimaliser_bilder»]

Men hva med kvaliteten? Klikk deg gjerne inn på de komprimerte bildene vi har linket til i tabellen for å se om du kan se forskjell.

Hvis vi skulle optimalisere bildet for bruk på nett ville vi selvsagt også endret oppløsningen. Det originale bildet på 24 megapiksler er langt større enn det som er nødvendig. Den høyeste oppløsningen vi bruker her på WPologi er 780×520 piksler.

Under har vi derfor optimalisert bildet riktig for bruk på våre nettsider. Vi har endret oppløsning og komprimert bildet på nytt. Størrelsen nå er bare 65 kilobyte. Det er en dramatisk endring fra originalen som var på hele 13136 kilobyte!

Skatergirl Optimalisert — Ved å optimalisere dette bildet for bruk på nett er størrelsen nå 65 kB.

Hvordan gå frem for å optimalisere bilder

Nå har du allerede sett effekten av å optimalisere bilder for bruk på nett. Synes du alt bare høres komplisert ut og fremdeles ikke sikker på hvordan du bør gå frem?

Det første du bør finne ut av er hvor stor oppløsning bildene du bruker på nettsiden trenger å være. Det kan varierer fra nettsted til nettsted, derfor er det vanskelig å gi noe fasitsvar på det.

Hvis du ikke klarer å finne ut av hvilken oppløsning som passer best for temaet du bruker, eller ser at de bildestørrelsene som er standard i WordPress ikke passer, kan du følge denne generelle veiledningen:

Blogginnlegg – 1200×630 piksler
Bilder med full bredde – 2880×1500 piksler
Fremhevet bilde – 1200×900 piksler
Bildefremviser – 2800×1500 piksler

Når du skal komprimere et bilde må du bare finne en balanse hvor du ikke mister for mye kvalitet samtidig som størrelsen er fornuftig.

Er du usikker bør du bare prøve deg frem til du finner et godt resultat. Bruk gjerne verktøy som GTmetrix eller Pingdom for å teste innleggene dine om de er innenfor 3 sekunder.

Under er en liste over kjente verktøy eller programvare du kan bruke for å optimalisere bilder for bruk på nett.

Adobe Photoshop

Adobe Photoshop er et av de mest brukte verktøyene for bildebehandling generelt. Det er nesten ikke grenser for hva Adobe Photoshop kan gjøre med bilder og vil dekke de aller fleste behov.

Versjonen vi bruker på skjermbildet under, har en egen funksjon for å lagre bilder til bruk på nett (File > Save for web..). Her kan du velge oppløsning og sammenligne hvordan kvaliteten blir utifra hvor mye du komprimerer de.

Ulempen med Adobe Photoshop, er at programvaren har en ganske høy prislapp. Derfor er det ikke et alternativ for mange.

GIMP

GIMP er en forkortelse for GNU Image Manipulation Program, og er et gratis bilderedigeringsprogram for Windows, Mac og Linux. Programmet er åpen kildekode og distribueres under en såkalt GPL-lisens.

Til å være gratis er GIMP helt overlegen, og kan på mange områder sammenlignes med Adobe Photoshop. Programmet anbefales til alle som ikke har budsjett eller ønsker å investere i dyr programvare for bilderedigering.

Besøk den offisielle hjemmesiden til GIMP for å lese mer, og laste ned programmet. Les guiden hvordan optimalisere bilder for bruk på nett med GIMP for mer informasjon.

JPEGOPTIM

JPEGOPTIM er et verktøy for å optimalisere JPEG bilder for Linux (noe de fleste webhotell kjøres på). Programmet er kommandobasert og har avanserte komprimeringsteknikker for JPEG.

JPEGOPTIM er sannsynligvis ikke aktuelt om du er på delt hosting, men i hovedsak ment for de med VPS eller dedikert server. Om det gjelder deg, bør du se nærmere på hvordan lage din egen bildeoptimalisering for JPEG.

OPTIPNG

OPTIPNG er et verktøy som optimaliserer PNG bilder for Linux (noe de fleste webhotell kjøres på). Programmet kan også konvertere bildeformatene BMP, GIF, PNM og TIFF til PNG filer.

Verktøyet er kommandobasert, og har avanserte metoder for å optimalisere og sjekke integriteten for bildeformatet PNG. OPTIPNG er sannsynligvis ikke aktuelt om du er på delt hosting, men i hovedsak ment for de med VPS eller dedikert server.

Med OPTIPNG kan du lage din egen bildeoptimalisering for PNG.

TinyPNG

TinyPNG er en gratis webapplikasjon for å komprimere bildeformatene PNG og JPEG. Verktøyet er tilgjengelig direkte fra nettsiden, og lar deg laste opp bildene du ønsker å optimalisere. De optimaliserte bildene kan deretter lastes ned til datamaskinen din.

TinyPNG tilbyr også en utvidelse (plugin) for WordPress.

ImageOptim

ImageOptim er et verktøy for Mac, og lar deg komprimere bilder uten å redusere kvaliteten. Programmet støtter flere komprimeringsteknikker. Et alternativ for Windows er Trimage.

Optimaliser bilder med en utvidelse

Dersom alternativene ovenfor ikke er noe for deg, kan du alternativt bruke en utvidelse i WordPress for å optimalisere bilder for bruk på nett. Det er for mange den enkleste løsningen, og krever ingen kunnskap om bilderedigering.

Det finnes mange utvidelser for å optimalisere bilder i WordPress. Nylig så vi nærmere på ShortPixel som imponerte oss ved å forenkle og automatisere hele prosessen.

Når du overlater ansvaret for bilder på nettstedet ditt til en utvidelse er det viktig å ha en god rutine for sikkerhetskopier. Selv om de fleste utvidelser for bildeoptimalisering i WordPress er ganske sikre, kan uhell skje.

Oppsummering

Det er mange faktorer som kan påvirke hvor hurtig nettsiden din er, og det finnes mange optimaliseringer du kan implementere for å hindre at nettsiden din blir treg.

Du kan velge et raskt tema, installere en utvidelse for hurtigbuffer (cache), optimalisere databasen, velge et raskere webhotell osv. Dette er bare noen av tiltakene vi anbefaler i guiden hastighet og ytelse i WordPress.

Bildene du benytter er derimot det første du bør se nærmere på.

Hvis du ikke allerede optimaliserer bildene dine for bruk på nett, bør du begynne å gjøre det nå. Det vil gjøre nettstedet ditt raskere, forbedre resultatene i søkemotorer og gi leserne en bedre brukeropplevelse.

Når du optimaliserer bilder for bruk på nett, er det viktig at du finner en balanse hvor størrelsen reduseres uten å miste synlig kvalitet.