Skip to content

Alt om WordPress, webutvikling — og mer til

🖼 Slik serverer du WebP-bilder i WordPress: 3 metoder
WordPressWordPress-utvidelser
10 min1,906 ord

🖼 Slik serverer du WebP-bilder i WordPress: 3 metoder

PageSpeed Insights viser anbefalingen «Serve images in next-gen formats», men bildene på nettstedet ditt er fortsatt i JPEG. Å konvertere alt til WebP er enkelt. Utfordringen er en annen: en liten andel besøkende med eldre nettlesere vil se ødelagte bilder hvis du bare bytter ut formatet på serveren.

Oppgaven handler ikke om konvertering, men om selektiv levering: WebP til dem som støtter det, og originalen til alle andre. I WordPress løses dette på tre forskjellige måter, hver tilpasset en bestemt teknologistakk og et bestemt budsjett.

💡 Hurtigoversikt:

  • Forstå hva WebP er og hvorfor det er bedre enn JPEG
  • Lær de to tilnærmingene til å levere WebP
  • Velg én av tre metoder for din teknologistakk og ditt budsjett
  • Konfigurer utvidelsen og verifiser resultatet i Chrome DevTools

Hva WebP er og hvorfor du trenger det

WebP er et bildeformat fra Google som komprimerer bedre enn JPEG og PNG ved samme visuelle kvalitet. Et bilde som veier 100 KB i WebP, veier 55-75 KB. Ingen magi: bare en mer effektiv komprimeringsalgoritme.

Google PageSpeed Insights recommendation to use WebP format

Formatet er ikke nytt. Spesifikasjonen ble publisert av Google i 2010. Siden da har WebP gått fra eksperiment til standard: komprimering med og uten tap, gjennomsiktighet, animasjon. I praksis kombinerer det egenskapene til JPEG, PNG og GIF i én beholder.

Rask sammenligning med tradisjonelle formater:

JPEG

GIF

PNG

SVG

WebP

Vektor

❌

❌

❌

✅

❌

Raster

✅

✅

✅

❌

✅

Gjennomsiktighet

❌

✅

✅

✅

✅

Animasjon

❌

✅

✅

✅

✅

Komprimering med tap

✅

❌

❌

❌

✅

Tapsfri komprimering

❌

❌

✅

❌

✅

Comparison of WebP file size with JPEG and PNG at the same quality

Størrelsesforskjellen er merkbar. For et nettsted med femti bilder per side reduserer overgang til WebP totalvekten mange ganger. Påvirkningen på Core Web Vitals og søkerangeringer er direkte.

Hvorfor du ikke bare kan aktivere WebP overalt

Svaret handler om kompatibilitet. I dag støttes WebP av over 96% av nettleserne: Chrome, Firefox, Safari (fra iOS 14), Edge. Men det gjenstår en liten prosentandel gamle enheter som ikke forstår formatet.

WebP support diagram across major browsers

Hvis du bare erstatter alle JPEG-er med WebP på serveren, vil disse få prosentene av besøkende se ødelagte bilder. For et kommersielt nettsted eller en nettbutikk er dette tapet av brukere uakseptabelt.

Så oppgaven handler ikke om å «konvertere bilder», men om å «levere WebP til dem som støtter det, og originalen til alle andre».

To grunnleggende tilnærminger til å levere WebP

Før vi går videre til metoder for WordPress, er det verdt å forstå hvordan nettleseren og serveren forhandler om format. Det finnes bare to mekanismer.

Tilnærming 1: -taggen

Nettleseren tilbys et valg mellom WebP og originalen direkte i HTML-markeringen:

1<picture>
2  <source srcset="img.webp" type="image/webp">
3  <source srcset="img.jpg" type="image/jpeg">
4  <img src="img.jpg" alt="Image description">
5</picture>

En nettleser med WebP-støtte vil ta den første <source>. Resten vil ignorere WebP-kilden og laste JPEG fra <img>.

Pluss: fungerer uten serverkonfigurasjon og med ethvert CDN. Minus: fungerer ikke med bakgrunnsbilder i CSS og endrer HTML-strukturen. Noen hurtigbuffer- og lazy loading-utvidelser snubler over <picture>.

Tilnærming 2: variert respons

I HTML forblir en vanlig <img src="img.jpg">, men serveren returnerer forskjellig innhold for samme URL: en WebP-fil til nettlesere med WebP-støtte, originalen til alle andre.

Nøkkelen til mekanismen er HTTP-headeren Accept. Nettleseren sender den med hver forespørsel, serveren eller CDN-et bestemmer hva som skal returneres.

Pluss: fungerer overalt, inkludert bakgrunnsbilder i CSS. HTML endres ikke. Minus: krever serverkonfigurasjon, og ikke alle CDN-er tar korrekt hensyn til Accept i hurtigbuffernøkkelen.

La oss sammenligne:

<picture>

Variert respons

Bakgrunnsbilder

❌

✅

Fungerer med ethvert CDN

✅

Bare med Vary: Accept-støtte

Serverkonfigurasjon

❌ ikke nødvendig

✅ nødvendig

Lazy loading

✅

✅

Kompatibilitet med hurtigbufferutvidelser

Kan komme i konflikt

✅

La oss nå se hvordan disse tilnærmingene brukes i WordPress.

Metode 1: CDN med WebP-konvertering i sanntid

Den enkleste veien. Du kobler til et CDN som optimaliserer bilder i sanntid og leverer WebP til nettlesere som støtter det. Konverterte kopier lagres ikke på serveren din, noe som sparer diskplass.

Flere fungerende alternativer:

  • BunnyCDN med Bunny Optimizer, komprimerer og konverterer bilder i farten, støtter WebP i cache-nøkkelen. Fra $0,01/GB.
  • Cloudflare med Polish (Pro-nivå, $20/måned), automatisk komprimering og konvertering til WebP.
  • Cloudinary, en spesialisert tjeneste for bildehåndtering, WebP ut av esken.
  • ShortPixel Adaptive Images, en WordPress-plugin som bruker bunny.net CDN. Konverterer og leverer WebP automatisk. Gratisnivå: 500 MB trafikk per måned.
  • WP Compress, en hybridtjeneste: bildeoptimalisering pluss levering via deres eget CDN.
Bunny Optimizer settings for converting images to WebP

Når du bør velge metode 1: hvis du er klar for å betale for CDN og ikke vil styre med serverkonfigurasjon. Koblet til, slo på optimalisering, så fungerte det.

Metode 2: variert respons + CDN

En metode for dem som foretrekker å løse oppgaven på servernivå uten å endre HTML-markup.

Essensen: du konfigurerer serveren slik at den på én enkelt URL returnerer WebP eller JPEG/PNG avhengig av Accept-headeren. Alle bilde-URL-er i koden forblir de samme.

Oppsett via WebP Express

Den enkleste måten å implementere variert respons i WordPress er med pluginen WebP Express. Pluginen har over 400 000 aktive installasjoner, jevnlige oppdateringer og aktiv støtte fra forfatteren. Den gjør tre ting:

  • Konverterer opplastede bilder til WebP.
  • Skriver omdirigeringsregler (.htaccess for Apache/LiteSpeed eller Nginx-regler).
  • Ved forespørsel av et bilde sjekker den Accept-headeren og returnerer det nødvendige formatet.
WebP Express plugin settings page in WordPress admin

Etter installasjon er det nok å klikke «Save settings and force new.htaccess rules». Pluginen vil konfigurere konvertereren og reglene selv.

For Nginx-servere

WebP Express genererer regler for .htaccess (Apache/LiteSpeed/OpenLiteSpeed). Hvis du har Nginx, må du manuelt skrive reglene i konfigurasjonen:

1&#35;&#35; --- Nginx rules: try WebP first, fallback to converter
2location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
3  add_header Vary Accept;
4  expires 365d;
5  if ($http_accept !~* "webp") {
6    break;
7  }
8  try_files
9    /wp-content/webp-express/webp-images/doc-root/$uri.webp
10    $uri.webp
11    /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=$request_filename&wp-content=wp-content
12    ;
13}
14 
15&#35;&#35; --- Route missing .webp requests to the realizer
16location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ {
17    try_files
18      $uri
19      /wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content
20      ;
21}
22&#35;&#35; --- End WebP Express rules

Det reglene gjør: legger til Vary: Accept-headeren (slik at CDN ikke cacher WebP for alle), prøver å servere den ferdige .webp-filen, og hvis den ikke finnes, sender forespørselen til konvertereren.

Kritisk: valg av CDN for metode 2

Feilen som ødelegger hele metoden: CDN cacher WebP og serverer den til nettlesere uten formatstøtte. Dette skjer når CDN-en ikke tar hensyn til Accept-headeren i cachenøkkelen.

Leverandører som fungerer korrekt med Vary: Accept:

Bunny CDN, støtte for variert respons aktiveres i soneinnstillingene.

WebP cache key setting in BunnyCDN panel
  • KeyCDN, støtter også WebP som en del av cachenøkkelen. Aktiveres i soneinnstillingene, under Cache-delen.
WebP cache key option in KeyCDN panel
  • Google CDN, tar hensyn til Vary: Accept som standard.

På Cloudflares gratisnivå er det ingen fullstendig hensyntagen til Accept i cachenøkkelen. Resultat: WebP kan bli servert der det ikke støttes. To utveier: bytt til Pro-nivået ($20/måned) eller bruk et CDN som kan håndtere Vary: Accept ut av boksen (BunnyCDN eller KeyCDN).

WebP Express + CDN-kombinasjon hos populære hoster

Opplegget er det samme for alle: installer WebP Express, og handle deretter ut fra servermiljøets omstendigheter:

  • Kinsta / WP Engine, kontakt support. Ingeniører vil legge til Nginx-konfigurasjon for WebP Express og aktivere riktig WebP-cachenøkkel i deres CDN (KeyCDN hos Kinsta).
  • Cloudways, en Apache+Nginx-hybrid. WebP Express med lagring av .htaccess er vanligvis nok. Regler plukkes opp automatisk.
  • SiteGround, be support om å legge til Nginx-regler og bruk et kompatibelt CDN.
  • LiteSpeed / OpenLiteSpeed / Apache, kun WebP Express og .htaccess-regler. Velg et CDN med Vary: Accept-støtte.
  • Egen VPS med Nginx (LEMP), legg manuelt til Nginx-reglene over og koble til et CDN med Vary: Accept-støtte.

Når du bør velge metode 2: hvis du prinsipielt ikke vil endre HTML-markup, har bakgrunnsbilder i CSS og er klar for å konfigurere serveren én gang.

Metode 3: via -taggen

Et alternativ når de to første ikke passer. Krever ikke serverkonfigurasjon, fungerer med ethvert CDN. Pluginen erstatter standard <img>-tagger med en <picture>-konstruksjon, og nettleseren velger formatet selv.

Metodens ulemper:

  • Fungerer ikke med bakgrunnsbilder.
  • Kan komme i konflikt med temaer og cache-pluginer som endrer <img>-output.
  • Endrer HTML-struktur, noe som noen ganger ødelegger lazy loading-pluginer.

Oppsett via WebP Express

Den samme WebP Express kan fungere i <picture>-modus. I innstillingene velger du «CDN friendly»-modus og aktiverer «Alter HTML»-alternativet. Pluginen vil i sanntid pakke alle <img> inn i <picture> med en WebP-kilde.

Når du bør velge metode 3: hvis det ikke er tilgang til serverkonfigurasjon og CDN-et ikke støtter Vary: Accept. For eksempel billig hosting med strenge begrensninger eller gratis Cloudflare.

Video: WebP i WordPress på 10 minutter

Hvis du foretrekker å se fremfor å lese, her er en visuell veiledning for oppsett av WebP via WebP Express:

Videoen viser fullt WebP Express-oppsett fra installasjon til verifisering i Chrome DevTools. Konvertering til AVIF blir også berørt, som neste steg etter WebP.

⁉️🤔 Ofte stilte spørsmål

Er WebP alltid en størrelsesreduksjon?

Ikke alltid, men i de fleste tilfeller. For bilder og skjermbilder er besparelsen 25-50%, ifølge Google-utviklere. For bilder med tekst eller flate farger kan WebP til og med være tyngre enn PNG-8. For innholdsbilder gir WebP nesten alltid en gevinst. For ikoner og enkel grafikk er SVG eller optimalisert PNG mer optimalt. Utvidelser som WebP Express konverterer alt, resultatet avhenger av kildeformatet.

Kan du bruke WebP uten utvidelser i WordPress?

Fra og med WordPress 5.8, ja. Kjernen godtar .webp-filer ved opplasting til mediebiblioteket. Men det er ingen automatisk konvertering av gamle bilder, og heller ingen erstatning av format for nettleseren. Hvis du bare laster opp nye bilder i WebP og er komfortabel med fraværet av fallback for en liten prosentandel gamle nettlesere, er utvidelser ikke obligatorisk. For full implementering på et eksisterende nettsted klarer du deg ikke uten en utvidelse: du trenger batch-konvertering og en mekanisme for formaterstatning.

Hvordan sjekke at WebP serveres korrekt?

Åpne nettstedet i Chrome, trykk F12, Nettverk-fanen, filtrer på Img. I Type-kolonnen skal det stå webp. Alternativt: se etter X-WebP-Express-headeren i serverresponsen (hvis du bruker WebP Express) eller content-type: image/webp. Chrome DevTools er den mest pålitelige måten: filtrer på bilder og se på Type-kolonnen. Hvis det står webp, fungerer alt.

Hva gjør du hvis CDN cacher WebP feil?

Symptom: noen brukere ser ødelagte bilder, selv om alt er aktivert i innstillingene. Behandling: sørg for at CDN-en tar hensyn til Accept- og Vary-headere i cachenøkkelen. I BunnyCDN- og KeyCDN-panelene finnes det eksplisitte brytere for dette. Hvis det ikke er noen Accept i cachenøkkelen, vil den første forespørselen fra Chrome opprette en WebP-kopi, og alle påfølgende brukere, inkludert Safari uten WebP, vil få akkurat denne kopien. På Cloudflare finnes det ingen gratis løsning, enten Pro eller bytt CDN.

WebP eller AVIF, hva velger man i 2026?

AVIF gir enda bedre komprimering (20-30% mindre enn WebP ved samme kvalitet), men nettleserstøtten henger fortsatt etter: rundt 92% mot 96% for WebP. I 2026 forblir WebP de facto-standarden for nettet. AVIF tar innpå, men gapet i nettleserstøtte er fortsatt kritisk for kommersielle prosjekter. En praktisk strategi: WebP nå, AVIF når støtten passerer 95%.

Hvilken metode du bør velge for din oppgave: endelig oversikt

Valget av metode avhenger ikke av hva som er «best generelt», men av din spesifikke stack og villighet til å bruke tid eller penger:

  • Klar til å betale for CDN og ikke røre serveren, metode 1 med BunnyCDN (fra $0,01/GB) eller Cloudflare Pro ($20/måned). Sett det opp på fem minutter og glem det.
  • Har servertilgang og ønsker å løse det én gang, metode 2 med WebP Express og en CDN som støtter Vary: Accept. Fungerer med bakgrunnsbilder, rører ikke HTML.
  • Ingen servertilgang og begrenset budsjett, metode 3 med WebP Express i <picture>-modus. Ikke ideelt, men bedre enn ingen WebP i det hele tatt.

Test den valgte metoden i staging. Sjekk responsheadere og Type-kolonnen i Chrome DevTools. Sørg for at gamle nettlesere får JPEG, ikke ødelagte lenker. Og først deretter deploy til produksjon.

Prøv WebP Express, utvidelsen dekker begge servermetodene ut av boksen og er gratis. Skriv i kommentarfeltet hvilken tilnærming du valgte og hvilke fallgruver du støtte på.

Redaksjonen
RedaksjonenRedaksjonelt team→ All publications

Et profesjonelt team av forfattere og redaktører som spesialiserer seg på å lage kvalitetsinnhold.