PageSpeed Insights visar rekommendationen "Serve images in next-gen formats", men bilderna på din webbplats ligger fortfarande i JPEG. Att konvertera allt till WebP är enkelt. Utmaningen är en annan: en liten andel besökare med äldre webbläsare kommer att se trasiga bilder om du bara byter format på servern.

Uppgiften handlar inte om konvertering, utan om selektiv leverans: WebP till dem som stödjer det, och originalet till alla andra. I WordPress löses detta på tre olika sätt, vart och ett för en specifik teknisk stack och budget.

💡 Snabb översikt:

• Förstå vad WebP är och varför det är bättre än JPEG
• Lär dig de två tillvägagångssätten för att servera WebP
• Välj en av tre metoder för din stack och budget
• Konfigurera tillägget och verifiera resultatet i Chrome DevTools

Vad WebP är och varför du behöver det

WebP är ett bildformat från Google som komprimerar bättre än JPEG och PNG vid samma visuella kvalitet. En bild som väger 100 KB i WebP väger 55-75 KB. Ingen magi: bara en mer effektiv komprimeringsalgoritm.

Formatet är inte nytt. Specifikationen publicerades av Google 2010. Sedan dess har WebP gått från experiment till standard: destruktiv och icke-destruktiv komprimering, transparens, animation. I grunden kombinerar det funktionerna hos JPEG, PNG och GIF i en behållare.

Snabb jämförelse med traditionella format:

Storleksskillnaden är märkbar. För en webbplats med femtio bilder per sida minskar den totala vikten mångfaldigt genom att byta till WebP. Påverkan på Core Web Vitals och sökrankning är direkt.

Varför du inte bara kan aktivera WebP överallt

Svaret handlar om kompatibilitet. Idag stöds WebP av över 96% av webbläsarna: Chrome, Firefox, Safari (från iOS 14), Edge. Men det finns kvar en liten andel gamla enheter som inte förstår formatet.

Om du helt enkelt ersätter alla JPEG-bilder med WebP på servern kommer dessa få procent av besökarna att se trasiga bilder. För en kommersiell webbplats eller webbutik är detta användartapp oacceptabelt.

Så uppgiften handlar inte om att "konvertera bilder", utan om att "servera WebP till dem som stödjer det, och originalet till alla andra."

Två grundläggande tillvägagångssätt för att servera WebP

Innan vi går vidare till metoder för WordPress är det värt att förstå hur webbläsaren och servern förhandlar om format. Det finns bara två mekanismer.

Tillvägagångssätt 1: -taggen

Webbläsaren erbjuds ett val mellan WebP och originalet direkt i HTML-uppmärkningen:

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 webbläsare med WebP-stöd tar den första <source>. Resten ignorerar WebP-källan och laddar JPEG från <img>.

Plus: fungerar utan serverkonfiguration och med vilket CDN som helst. Minus: fungerar inte med bakgrundsbilder i CSS och ändrar HTML-strukturen. Vissa cache- och lazy loading-tillägg snubblar på <picture>.

Tillvägagångssätt 2: varierat svar

I HTML finns en vanlig <img src="img.jpg"> kvar, men servern returnerar olika innehåll för samma URL: en WebP-fil till webbläsare med WebP-stöd, originalet till alla andra.

Nyckeln till mekanismen är HTTP-headern Accept. Webbläsaren skickar den med varje förfrågan, servern eller CDN:t avgör vad som ska returneras.

Plus: fungerar överallt, inklusive bakgrundsbilder i CSS. HTML ändras inte. Minus: kräver serverkonfiguration, och inte alla CDN tar korrekt hänsyn till Accept i cache-nyckeln.

Låt oss jämföra:

Låt oss nu se hur dessa tillvägagångssätt tillämpas i WordPress.

Metod 1: CDN med WebP-konvertering i farten

Den enklaste vägen. Du ansluter ett CDN som optimerar bilder i farten och serverar WebP till webbläsare som stödjer det. Konverterade kopior lagras inte på din server, vilket sparar diskutrymme.

Flera fungerande alternativ:

• BunnyCDN med Bunny Optimizer, komprimerar och konverterar bilder i farten, stöder WebP i cache-nyckeln. Från $0,01/GB.
• Cloudflare med Polish (Pro-nivå, $20/månad), automatisk komprimering och konvertering till WebP.
• Cloudinary, en specialiserad tjänst för bildhantering, WebP direkt ur lådan.
• ShortPixel Adaptive Images, ett WordPress-plugin som använder bunny.net CDN. Konverterar och levererar WebP automatiskt. Gratisnivå: 500 MB trafik per månad.
• WP Compress, en hybridtjänst: bildoptimering plus leverans via deras eget CDN.

När du ska välja metod 1: om du är beredd att betala för CDN och inte vill krångla med serverkonfiguration. Koppla upp, slå på optimering, klart.

Metod 2: varierat svar + CDN

En metod för dig som föredrar att lösa uppgiften på servernivå utan att ändra HTML-uppmärkningen.

Kärnan: du konfigurerar servern så att den på en och samma URL returnerar WebP eller JPEG/PNG beroende på Accept-headern. Alla bild-URL:er i koden förblir desamma.

Installation via WebP Express

Det enklaste sättet att implementera varierat svar i WordPress är tillägget WebP Express. Tillägget har 400 000+ aktiva installationer, regelbundna uppdateringar och aktiv support från utvecklaren. Det gör tre saker:

• Konverterar uppladdade bilder till WebP.
• Skriver omdirigeringsregler (.htaccess för Apache/LiteSpeed eller Nginx-regler).
• Vid en bildförfrågan kontrolleras Accept-headern och rätt format returneras.

Efter installation räcker det att klicka på "Save settings and force new.htaccess rules." Tillägget konfigurerar konverteraren och reglerna själv.

För Nginx-servrar

WebP Express genererar regler för .htaccess (Apache/LiteSpeed/OpenLiteSpeed). Om du har Nginx måste du manuellt skriva reglerna i konfigurationen:

1
## --- Nginx rules: try WebP first, fallback to converter
2
location ~* ^/?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
## --- Route missing .webp requests to the realizer
16
location ~* ^/?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
## --- End WebP Express rules

Vad reglerna gör: lägger till Vary: Accept-headern (så att CDN inte cachar WebP för alla), försöker servera den färdiga .webp-filen, och om den inte finns skickas förfrågan till konverteraren.

Kritiskt: val av CDN för metod 2

Misstaget som förstör hela metoden: CDN cachar WebP och serverar den till webbläsare utan formatstöd. Detta händer när CDN inte tar hänsyn till Accept-headern i cache-nyckeln.

Leverantörer som fungerar korrekt med Vary: Accept:

Bunny CDN, stöd för varierat svar aktiveras i zoninställningarna.

• KeyCDN, stöder också WebP som en del av cache-nyckeln. Aktiveras i zoninställningarna, under Cache.

• Google CDN, tar hänsyn till Vary: Accept som standard.

På Cloudflares gratisnivå finns ingen fullständig hänsyn till Accept i cache-nyckeln. Resultat: WebP kan hamna där det inte stöds. Två utvägar: byt till Pro-nivån ($20/månad) eller använd ett CDN som kan hantera Vary: Accept direkt (BunnyCDN eller KeyCDN).

WebP Express + CDN-kombination hos populära webbhotell

Upplägget är detsamma för alla: installera WebP Express, agera sedan utifrån servermiljöns förutsättningar:

• Kinsta / WP Engine, kontakta supporten. Ingenjörer lägger till Nginx-konfiguration för WebP Express och aktiverar rätt WebP-cache-nyckel i deras CDN (KeyCDN hos Kinsta).
• Cloudways, en Apache+Nginx-hybrid. WebP Express med sparad .htaccess räcker oftast. Reglerna plockas upp automatiskt.
• SiteGround, be supporten lägga till Nginx-regler och använd ett kompatibelt CDN.
• LiteSpeed / OpenLiteSpeed / Apache, endast WebP Express och .htaccess-regler. Välj ett CDN med stöd för Vary: Accept.
• Egen VPS med Nginx (LEMP), lägg till Nginx-reglerna ovan manuellt och anslut ett CDN med stöd för Vary: Accept.

När du ska välja metod 2: om du principiellt inte vill ändra HTML-uppmärkningen, har bakgrundsbilder i CSS och är beredd att konfigurera servern en gång.

Metod 3: via -tagg

Ett reservalternativ när de två första inte passar. Kräver ingen serverkonfiguration, fungerar med vilket CDN som helst. Tillägget ersätter standard <img>-taggar med en <picture>-konstruktion, och webbläsaren väljer själv format.

Metodens nackdelar:

• Fungerar inte med bakgrundsbilder.
• Kan krocka med teman och cache-tillägg som modifierar <img>-utdata.
• Ändrar HTML-strukturen, vilket ibland förstör tillägg för lazy loading.

Installation via WebP Express

Samma WebP Express kan fungera i <picture>-läge. I inställningarna väljer du "CDN friendly"-läget och aktiverar alternativet "Alter HTML". Tillägget kommer i farten att slå in alla <img> i <picture> med en WebP-källa.

När du ska välja metod 3: om det inte finns tillgång till serverkonfiguration och CDN inte stöder Vary: Accept. Till exempel billigt webbhotell med strikta begränsningar eller gratis Cloudflare.

Video: WebP i WordPress på 10 minuter

Om du föredrar att titta istället för att läsa, här är en visuell guide för att konfigurera WebP via WebP Express:

Videon visar fullständig installation av WebP Express från installation till verifiering i Chrome DevTools. Konvertering till AVIF berörs också, som nästa steg efter WebP.

⁉️🤔 Vanliga frågor

Innebär WebP alltid en storleksminskning?

Inte alltid, men i de flesta fall. För foton och skärmdumpar är besparingen 25-50%, enligt Googles utvecklare. För bilder med text eller platta färger kan WebP till och med bli tyngre än PNG-8. För innehållsbilder ger WebP nästan alltid en vinst. För ikoner och enkel grafik är SVG eller optimerad PNG mer optimalt. Plugins som WebP Express konverterar allt, resultatet beror på källformatet.

Kan man använda WebP utan plugins i WordPress?

Från och med WordPress 5.8, ja. Kärnan accepterar .webp-filer vid uppladdning till mediebiblioteket. Men det finns ingen automatisk konvertering av gamla bilder, och inte heller något formatbyte för webbläsaren. Om du bara laddar upp nya bilder i WebP och kan acceptera avsaknaden av fallback för en liten andel gamla webbläsare, är plugins inte obligatoriska. För full implementation på en befintlig sajt klarar du dig inte utan ett plugin: du behöver batchkonvertering och en mekanism för formatbyte.

Hur kontrollerar man att WebP levereras korrekt?

Öppna sajten i Chrome, tryck F12, fliken Nätverk, filtrera på Img. I kolumnen Typ ska det stå webp. Alternativt: leta efter headern X-WebP-Express i serversvaret (om du använder WebP Express) eller content-type: image/webp. Chrome DevTools är det mest pålitliga sättet: filtrera på bilder och titta på kolumnen Typ. Om det står webp fungerar allt.

Vad gör man om CDN cachar WebP felaktigt?

Symptom: vissa användare ser trasiga bilder, trots att allt är aktiverat i inställningarna. Åtgärd: se till att CDN:t tar hänsyn till Accept- och Vary-headers i cache-nyckeln. I panelerna för BunnyCDN och KeyCDN finns explicita reglage för detta. Om Accept inte finns med i cache-nyckeln kommer den första förfrågan från Chrome att skapa en WebP-kopia, och alla efterföljande användare, inklusive Safari utan WebP, får exakt denna kopia. På Cloudflare finns ingen gratis lösning, antingen Pro eller byt CDN.

WebP eller AVIF, vad ska man välja 2026?

AVIF ger ännu bättre komprimering (20-30% mindre än WebP vid samma kvalitet), men webbläsarstödet släpar fortfarande efter: cirka 92% jämfört med 96% för WebP. År 2026 är WebP fortfarande de facto-standard för webben. AVIF är på väg ikapp, men gapet i webbläsarstöd är fortfarande kritiskt för kommersiella projekt. En praktisk strategi: WebP nu, AVIF när stödet passerar 95%.

Vilken metod ska du välja för din uppgift: slutlig sammanställning

Valet av metod beror inte på vilken som är "bäst i allmänhet", utan på din specifika teknikstack och beredskap att lägga tid eller pengar:

• Redo att betala för CDN och inte röra servern, metod 1 med BunnyCDN (från $0,01/GB) eller Cloudflare Pro ($20/månad). Sätt upp det på fem minuter och glöm det.
• Har servertillgång och vill lösa det en gång för alla, metod 2 med WebP Express och ett CDN som stöder Vary: Accept. Fungerar med bakgrundsbilder, rör inte HTML-koden.
• Ingen servertillgång och begränsad budget, metod 3 med WebP Express i <picture>-läge. Inte idealiskt, men bättre än ingen WebP alls.

Testa den valda metoden på staging. Kontrollera svarshuvuden och kolumnen Typ i Chrome DevTools. Säkerställ att gamla webbläsare får JPEG, inte trasiga länkar. Och först därefter driftsätt i produktion.

Prova WebP Express, pluginet täcker båda servermetoderna direkt ur lådan och är gratis. Skriv i kommentarerna vilket tillvägagångssätt du valde och vilka fallgropar du stötte på.