Slik får du raskere bilder i WordPress uten å ødelegge kvaliteten
Bilder er ofte den største årsaken til at et WordPress-nettsted føles tregt. Det merkes spesielt på mobil og dårlig nett, der store bildefiler gjør at sider bruker flere sekunder på å laste.
Heldigvis går det an å få langt raskere sider uten å ofre det visuelle uttrykket. Nøkkelen er bevisst bildehåndtering, noen fornuftige verktøy og enkle rutiner i redaksjonen.
Forstå hva som egentlig gjør bilder trege
Det er ikke bare antall bilder som har betydning, men hvordan de er lagret og levert. To like store bilder på skjermen kan ha svært ulik filstørrelse, og dermed helt ulik påvirkning på ytelsen.
Typiske årsaker til trege bilder er for høy oppløsning, feil filformat, manglende komprimering og at nettleseren må laste langt flere piksler enn den viser.
Velg riktig bildeformat: JPG, PNG, SVG og WebP
Formatet du velger, har stor innvirkning på både kvalitet og filstørrelse. Som hovedregel fungerer JPG godt til fotografier, mens PNG passer til grafikk, ikoner og bilder som trenger gjennomsiktighet.
SVG er ideelt for logoer og enkle illustrasjoner, siden de er vektorbaserte og dermed skalerer uten å bli uskarpe. WebP kan gi mindre filer enn JPG og PNG, men støtten kan variere avhengig av serveroppsett og verktøy.
En enkel tommelfingerregel
- Fotografier og header-bilder:JPGellerWebP
- Skjermbilder og illustrasjoner med tekst:PNGellerWebP
- Logo og enkle ikoner:SVG(hvis installasjonen tillater det på en sikker måte)
Riktig størrelse før du laster opp til WordPress
Et bilde fra mobil eller kamera kan lett være 4000 piksler bredt, mens innholdsfeltet på siden kanskje bare er 1200 piksler. Da betaler besøkende for piksler de aldri ser.
Prøv å ha en hovedregel for maksimal bredde på siden, for eksempel 1600 piksler for store toppbilder og 1200 piksler for vanlige innholdsbilder, og skaler ned før opplasting der det er mulig.
En enkel arbeidsflyt for redaksjonen
- Lag ferdig bildet i et bildeprogram og beskjær til riktig utsnitt.
- Skaler til maks bredde som passer designet (f.eks. 1600 px).
- Lagre som JPG eller PNG, og kjør gjennom et komprimeringsverktøy.
- Last først deretter opp i WordPress.
Komprimering: mindre filer, samme opplevde kvalitet
Komprimering betyr at du fjerner data som ikke er nødvendige for skjermvisning. God komprimering gir liten forskjell i kvalitet, men stor forskjell i filstørrelse.
Du kan komprimere enten før opplasting med et eget program, eller automatisk i WordPress med et utvidelsesprogram. Før du standardiserer på et oppsett, lønner det seg å teste på noen få bilder og sammenligne kvalitet og filstørrelse.
Lazy loading og hvorfor det hjelper så mye
Lazy loading betyr at nettleseren kun laster bilder som er i eller nær synsfeltet, i stedet for å laste alle bilder på hele siden med en gang. Resten lastes etter hvert som besøkende scroller nedover.
Nyere WordPress-installasjoner bruker ofte lazy loading automatisk via attributtetloading=”lazy”. Likevel er det lurt å teste sidene i et verktøy som PageSpeed Insights for å se om alt oppfører seg som forventet, spesielt for hovedbilder øverst på siden.
CDN for bilder: når er det verdt det?
Et Content Delivery Network (CDN) kan levere bildene fra servere nærmere besøkende geografisk, noe som gir kortere ventetid. For nettsteder med nasjonal eller internasjonal trafikk kan dette gi merkbar effekt.
Mange CDN-tjenester har også innebygget bildeoptimalisering som automatisk justerer format og størrelse basert på enhet. Før du slår det på i produksjon, bør du teste nøye i et testmiljø og ta sikkerhetskopi av nettsted og database.
Gode filnavn og alt-tekst gir både struktur og SEO
Selv om dette ikke gjør bildefilene mindre, gjør det administrasjonen enklere og kan bidra positivt til søk. Unngå tekniske filnavn, og bruk korte, beskrivende navn med ord skilt av bindestrek.
Samtidig bør du fylle inn alternativ tekst (alt-tekst) som kort beskriver motivet. Det gjør siden mer tilgjengelig for skjermlesere, og gir søkemotorer bedre forståelse av innholdet.
Eksempler på filnavn og alt-tekst
- Dårlig filnavn:IMG_4839.jpg
- Bedre filnavn:kontor-nettside-redaktor.jpg
- Eksempel på alt-tekst:Redaktør oppdaterer innhold på WordPress-nettside på laptop
Unngå vanlige feil som gjør bildeoptimalisering bortkastet
Selv et godt oppsett kan miste effekt hvis det kombineres med tunge slider-plugins, store gallerier på forsiden eller bakgrunnsvideoer med høy oppløsning. Vær bevisst på hvor mange bilder du har over folden.
Sjekk også at WordPress ikke lager unødvendig mange bildestørrelser via tema og utvidelser. Over tid kan dette fylle opp lagringsplassen og gjøre backup og restore tregere.
Lag en enkel bildepolicy for nettstedet
Det viktigste grepet for å holde ytelsen oppe over tid er å ha noen enkle regler alle som publiserer innhold følger. Da slipper du å være avhengig av én teknisk ansvarlig som skal fange opp alt i etterkant.
En kort intern sjekkliste med maks bredde, anbefalt format, komprimering og krav om alt-tekst kan gjøre stor forskjell på lastetid og helhetsinntrykk, uten at det går på bekostning av design eller kreativitet.
0 kommentarer