Bildeoptimalisering i WordPress

Bruker du mange bilder i full størrelse på WordPress-siden din? Vær klar over at dette gjør innlastingen av nettsiden din treg. En treg nettside påvirker søkemotoroptimaliseringen, øker fluktraten og øker distansen til publikumet ditt.

Bildeoptimalisering er avgjørende for en god nettside

En treg nettside er alle sitt problem. Ikke bare kan det føre til at de besøkende forlater nettsiden, men det påvirker også søkemotoroptimaliseringen (SEO) til nettsiden. Så det å vedlikeholde en nettside er definitivt noe som bør prioriteres når du driver en bedrift eller en personlig side.

Det er mange veier å gå for å øke hastigheten på nettsiden din i WordPress, hver og en komplimenterer hverandre. Det er ikke en universell metode, det er avhengig av den enkelte nettsiden og hva slags innhold denne består av. Hastighetsoptimalisering består ofte av en pakke av flere metoder som utgjør et vellykket tiltak. En av disse metodene er bildeoptimalisering.

Viktigheten av bildeoptimalisering

Ifølge Snipcart (https://snipcart.com/blog/images-optimization-page-load-time), er det 3 hovedgrunner for hvordan bilder påvirker nettsiden din i WordPress:

  • Bildene er for store. Bruk mindre størrelse.
  • Det er for mange bilder, som fører til et høyt antall HTTP-forespørelser. Bruk av CDN kan hjelpe.
  • Bildene bidrar til en simultan innlasting av elementer, sammen med HTML, CSS og Javascript. Ved å vise bildene etter hvert (via Lazy Loading) blir innlastingen fordelt og bidra til en raskere nettside.

Hvordan teste hastigheten til nettsiden din

Det er mange ulike verktøy å benytte seg av for å finne hastigheten til din nettside. Populære verktøy å bruke er Pingdom, GTmetrix eller Google PageSpeed Insights. Nå kan du få en personlig test av din hjemmeside av meg, der jeg gir deg en enkel oversikt over hastigheten og responsiviteten til nettsiden din (Hjemmeside-testen). Personlig bruker jeg Google sin løsning, da denne gir data over hvordan nettsiden din yter på både mobile plattformer og større enheter. Alle disse 3 verktøyene gir deg data om hvordan din WordPress-nettside yter. Du får oversikt over fordeler/ulemper med nettsiden din og konkrete tiltak du kan gjennomføre for å øke hastigheten. Disse verktøyene vil gi deg en god indikasjon på hvor mye bildene påvirker din nettside i WordPress.

Hvordan øke hastigheten til din nettside i WordPress

I dag er nettsider mer visuelle enn noen gang for å tiltrekke seg brukerens oppmerksomhet. Bilder, video og podcast har økt betraktelig over de siste fem årene, som har gjort at nettsider inneholder store mengder grafikk og bilder.

Bildeoptimalisering kan bli utført både manuelt og med utvidelser (plugins). La oss starte med den manuelle metoden (Dette er mest for dere som ønsker stor kontroll over nettsiden deres og gjøre alt på egenhånd). Optimalisere bilder manuelt vil i tillegg lære deg hvordan utvidelsene fungerer.

Optimalisere bilder manuelt

Her vil vi snakke om komprimering, størrelsesendring, bildeformat osv.

Bruk riktig bildeformat

Hvordan kan du si hvordan format som er det beste for din nettside og hvordan format som motstår endringer i bildekvalitet ved endringer og komprimering? Løsningen på dette er ikke så innlysende, det finnes nemlig ikke et fasitsvar på dette. Riktig bildeformat må altså tilpasses etter innholdet som det enkelte bildet har.

PNG er mest brukt for grafikk, logo, illustrasjoner, ikoner eller tekst fordi det enkelt kan endres og fortsatt være i god kvalitet etter komprimering. Det er fordi PNG-bilder er tapsløse – de taper ikke merkverdig kvalitet under komprimering.

JPG er mer populært blant fotografer og bloggere. Dette er kan effektivt komprimeres og åpne en liten størrelse, og samtidig holde en god kvalitet. Utfordringen skjer idet man ønsker å endre størrelsen eller komprimeringen, da kan man oppleve stor kvalitetsendring.

Et alternativ til PNG og JPG kan være WebP, et webbasert bildeformat introdusert av Google, som har til hensikt å gi mulighet for enda mindre bilder enn JPG og fortsatt opprettholde en god kvalitet. Ifølge Google, kan et WebP-bilde bli opptil 34% mindre enn et JPG-bilde og opptil 26% mindre enn et PNG-bilde.

Men WebP bildeformatet har sine ulemper, som for eksempel at det ikke støttes av alle nettlesere enda eller av WordPress i utgangspunktet (du trenger utvidelser).

Endre størrelse og klipp bilder

Når du har å gjøre med filer som har dimensjoner som er mye større du normalt trenger å vise på nettsiden din, så kan du enkelt endre størrelsen og klippe til bildene og laste de opp igjen på nettsiden din. Dette vil gjøre størrelsen av nettsiden din betraktelig mindre, som vil føre til en raskere side.

Så klart, om du har en fotografi-portefølje og det er viktig for deg å vise frem arbeidet ditt i sin originale form, da ønsker du ikke å endre på presenteringen av bildet.

Komprimer bilder

Alle bilderedigeringsprogram lar deg velge ønsket kvalitet å lagre bildet som. Du bruker normalt en kvalitet tilsvarende 100%, men du kan enkelt senke denne prosentandelen uten å merke en forskjell på kvaliteten. For eksempel 70-80% gir en god kvalitet for det blotte øye.

I tillegg hvis du ønsker ytterligere komprimering kan du ta i bruk et web-basert verktøy for å komprimere bildene. Populære verktøy er JPEG Optimizer og JPEG.io, som gir henholdsvis en reduksjon på omtrent 60%.

Automatisering av optimaliseringen av bilder

For å automatisere bildeoptimaliseringen på nettsiden din, trenger du verktøy/utvidelser. Disse skal i teorien utføre alle stegene som er belyst tidligere i denne artikkelen. Det er mange ulike automatiserte WordPress-løsninger som sørger for bildeoptimalisering, men jeg vil her presentere 3 ulike verktøy.

Optimole

Optimole er trolig den mest komplekse utvidelsen av dem alle fordi den tilbyr alle metoder som trengs for effektiv bildeoptimalisering. Så hvis du er på utkikk etter smart bildeoptimalisering i alle aspekter, da vil du trolig like Optimole.

Optimole overfører bildene dine til en sky (cloud) hvor de blir optimalisert. Deretter blir de optimaliserte bildene sendt via en CDN som gjør at de lastes inn raskt. Verktøyet bytter ut hver bildeadresse med en tilpasset.

Adaptering av bilder til enhver skjermstørrelse er en annen nøkkelevne til Optimole. Dette betyr at den automatisk optimaliserer bildene dine til den rette dimensjonen basert på brukerens skjerm, slik at brukeren blir levert et bilde som har perfekt størrelse og kvalitet for den gitte skjermen. I tillegg klarer Optimole å identifisere brukere som har en treg internettforbindelse og komprimere bildene enda mer for å sørge for at innlastingstiden ikke påvirkes av den lave internetthastigheten.

Optimole sørger enkelt for Lazy Loading av bilder på nettsiden din. Dette gjør at ikke alle bildene lastes inn samtidig og frigjør dermed plass.

Shortpixel

Shortpixel er en populær utvidelse til WordPress som er god til å optimalisere bilder i store mengder. Utvidelsen arbeider automatisk og optimaliserer alle bildene som du laster opp til mediabiblioteket.

Utvidelsen tilbyr 3 ulike nivå av komprimering (lossy, glossy og lossless), som du til og med kan bruke på miniatyrbilder. Alle modifiserte bilder blir lagret i en separat mappe på nettsiden, slik at du alltid kan gå fram og tilbake ved en optimalisering.

I tillegg lar Shortpixel deg konvertere PNG til JPG automatisk, lage WebP versjoner av bilder og optimalisere PDFer.

SMUSH

Et annet stort navn i WordPress-verden er SMUSH, som er et effektivt verktøy for optimalisering av bilder automatisk. SMUSH kommer med et visuelt intuitivt dashboard som gjør det enkelt å holde følge med optimaliseringene.

Utvidelsen tilbyr også mengdekomprimering, lazy loading, automatisk PNG til JPG og CDN-integrasjon. I likhet med ShortPixel, SMUSH legger til komprimeringsstatus til hvert bilde i mediabiblioteket.

Oppsummering

Ikke undervurder betydningen av bildeoptimalisering. Bilder er alltid en av hovedgrunnene bak en treg nettside. Google liker ikke trege nettsider, i likhet med dine besøkende og kunder. En nettside som ikke er optimalisert vil påvirke din SEO, øke fluktraten og føre til at du taper penger.  

Uavhengig av hvordan metoder du velger for å optimalisere bildene på nettsiden din, er dette avgjørende for å opprettholde en god nettside.

Relaterte nyheter