Hur man använder WebP-bilder i WordPress (3 metoder)

Bilder är ofta det största problemet bakom en långsam WordPress-webbplats. Om dina sidor tar för lång tid att ladda, kommer besökare att lämna innan de ens ser ditt innehåll.

Lyckligtvis kan användning av WebP-bilder lösa detta. Detta moderna filformat minskar bildstorlekar med upp till 35 % utan kvalitetsförlust, vilket gör din webbplats betydligt snabbare.

I den här guiden visar vi dig hur du använder WebP-bilder i WordPress med tre olika metoder.

Vad är WebP?

WebP är ett modernt bildformat som utvecklats av Google specifikt för webbanvändning. Det som gör det speciellt är dess överlägsna kompressionsteknik. WebP-bilder är vanligtvis 25-35% mindre än JPEG- och PNG-filer, samtidigt som de bibehåller identisk visuell kvalitet.

För att sätta detta i perspektiv, om din nuvarande PNG-bild är 100KB, skulle samma bild i WebP-format vara runt 65-75KB utan någon synlig kvalitetsförändring. Denna storleksminskning leder direkt till snabbare sidladdningstider och en bättre användarupplevelse.

Formatet stöder både förlustfri och icke-förlustfri komprimering, plus funktioner som transparens och animation, vilket gör det till en mångsidig ersättning för flera traditionella format.

Du kan lära dig mer om bildkomprimering i vår guide om hur man optimerar bilder för webben.

Webbläsarstöd: Är WebP redo för din webbplats?

För närvarande har WebP starkt stöd i webbläsare med över 95 % global täckning. Alla stora webbläsare, inklusive Chrome, Firefox, Safari (sedan iOS 14) och Edge, stöder WebP-bilder fullt ut.

De återstående 5% består huvudsakligen av äldre webbläsarversioner som snabbt minskar i användning.

Bör du använda WebP-bilder i WordPress?

För de flesta WordPress-sajter är svaret ja. Implementering av WebP kan avsevärt snabba upp din WordPress-webbplats och fungerar perfekt tillsammans med andra prestandaoptimeringar som cache-plugins och CDN:er.

Sedan WordPress 5.8 har plattformen inbyggt stöd för WebP, vilket innebär att du kan ladda upp och använda WebP-bilder direkt utan några plugins. Detta grundläggande stöd inkluderar dock inte automatisk konvertering av dina tidigare uppladdade bilder eller fallback-alternativ för äldre webbläsare.

För bästa resultat rekommenderar vi att du använder ett dedikerat plugin för bildoptimering. Dessa plugins konverterar automatiskt dina befintliga bilder till WebP-format och levererar traditionella JPEG- eller PNG-versioner till den lilla andelen användare med webbläsare som inte stöder det.

WebP är särskilt fördelaktigt om din webbplats är bildtung (som fotobloggar, e-handelsbutiker eller portföljer) eller om din WordPress-blogg för närvarande kämpar med långa laddningstider på grund av stora bilder.

Här är hur du använder WebP-bilder i WordPress. Vi kommer att visa dig flera metoder så att du kan välja en som fungerar bäst för dig:

Metod 1: Använda WebP-bilder i WordPress med EWWW Optimizer

EWWW Image Optimizer är ett av de bästa WordPress-plugins för bildkomprimering som låter dig optimera dina WordPress-bilder. Det stöder även WebP-bilder och kan automatiskt visa dem i webbläsare som stöder det. Se vår recension av EWWW Image Optimizer för mer information.

Det första du behöver göra är att installera och aktivera pluginet EWWW Image Optimizer. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering, gå till sidan Inställningar » EWWW Bildoptimerare för att konfigurera plugin-alternativen. Du kommer att se en installationsguide, men du kan klicka på länken 'Jag vet vad jag gör' för att avsluta den.

På nästa skärm ser du en mängd plugin-alternativ.

Bläddra ner och markera rutan bredvid alternativet ‘WebP Conversion’.

Klicka sedan på knappen 'Spara ändringar' för att lagra dina inställningar.

Därefter måste du skrolla ner till avsnittet WebP-konvertering. Plugin-programmet kommer nu att visa dig några omskrivningsregler med en röd förhandsgranskningsbild.

Du måste klicka på knappen ‘Infoga omskrivningsregler’, och plugin-programmet kommer automatiskt att försöka infoga dessa omskrivningsregler i din .htaccess-fil.

Om pluginet lyckas lägga till dessa regler, kommer den röda bildförhandsgranskningen att bli grön med texten 'WebP'.

Ibland kan pluginet inte infoga reglerna. I så fall måste du kopiera omskrivningsreglerna från pluginets inställningssida och klistra in dem längst ner i din .htaccess-fil manuellt.

När du är klar, gå tillbaka till plugin-inställningarna och klicka på knappen ‘Spara ändringar’ igen. Om förhandsgranskningsbilden blir grön, betyder det att du framgångsrikt har aktiverat WebP-bildleverans på din WordPress-webbplats.

Alternativt kan du välja 'JS WebP Rewriting' eller 'Picture WebP Rewriting' som dina WebP-leveransalternativ. Dessa är pålitliga alternativ om .htaccess-metoden inte fungerar för din serverkonfiguration (till exempel om du använder en CDN).

Konvertera dina gamla bilder i bulk till WebP-versioner

EWWW Image Optimizer låter dig enkelt konvertera dina tidigare uppladdade bildfiler till WebP-bilder. Gå helt enkelt till sidan Media » Bibliotek och byt till listvy.

Klicka sedan på knappen ‘Skärmalternativ’ och ändra ‘Antal objekt per sida’ till 999. Om du har 1000+ bilder, kommer dessa bilder att visas på nästa sida.

På så sätt kan du snabbt välja ett stort antal bilder för massoptimering. Klicka sedan på kryssrutan Markera alla högst upp för att markera alla bilder.

Klicka sedan på rullgardinsmenyn 'Massåtgärder' och välj alternativet 'Massoptimera'. Klicka slutligen på knappen 'Verkställ'.

På nästa skärm ger pluginet dig möjlighet att hoppa över bildkomprimeringen och bara konvertera dem till WebP. Du kan välja detta alternativ om dina bilder redan är optimerade.

Klicka sedan på knappen 'Skanna efter ooptimerade bilder' för att fortsätta. Pluginet visar sedan antalet bilder det hittade, så du kan klicka på knappen Optimera för att fortsätta.

Dina bilder kommer nu att optimeras, och EWWW Optimizer kommer att generera WebP-versioner av dina bilder.

Testa din WebP-bildleverans

När du har optimerat dina bilder kan du gå till ett blogginlägg som innehåller flera bilder.

Håll musen över en bild och högerklicka för att öppna bilden i en ny flik.

Detta öppnar bilden i en ny webbläsarflik.

Eftersom EWWW Bildoptimerare använder speciella omskrivningsregler, kommer bildens URL i adressfältet fortfarande att visa den ursprungliga filändelsen (som .png eller .jpg).

För att bekräfta att det är en WebP-bild, högerklicka på bilden och välj 'Spara bild som...'. I nedladdningsfönstret bör du se 'WebP-bild' listad som filtyp.

Om pluginet inte kan leverera WebP-bilden kan du gå tillbaka till pluginets inställningssida. Härifrån kan du ändra alternativet för WebP-leverans till metoderna 'JS WebP Rewriting' eller 'WebP Rewriting'.

Metod 2: Använda WebP-bilder i WordPress med Imagify

Imagify är ett WordPress-plugin för bildoptimering skapat av personerna bakom WP Rocket, den bästa WordPress-cache-pluginet. Det låter dig enkelt optimera och konvertera bilder till WebP-bildformat. Se vår Imagify-recension för att lära dig mer.

Det första du behöver göra är att installera och aktivera Imagify-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering måste du besöka sidan Inställningar » Imagify för att konfigurera pluginets inställningar. Härifrån klickar du på knappen 'Skapa en gratis API-nyckel' för att fortsätta.

Du kommer att bli ombedd att ange en företagsadress. Därefter kan du kontrollera din inkorg efter ett e-postmeddelande som innehåller din API-nyckel. Kopiera och klistra in nyckeln på pluginets inställningssida och klicka på knappen 'Spara ändringar'.

Därefter behöver du skrolla ner till avsnittet Optimering. Där behöver du markera alternativen bredvid 'Skapa webp-versioner av bilder' och 'Visa bilder i webp-format på webbplatsen'.

Nedanför kan du välja mellan två leveransmetoder för att visa WebP-bilder i WordPress. Den första är .htaccess-metoden, och den andra är att använda en tagg.

.htaccess-metoden är snabbare, men den fungerar inte om du använder en CDN-tjänst. Tag-metoden (med <picture>-taggar) fungerar perfekt med CDN:er, även om den ändrar din webbplats kodstruktur något.

Du kan välja en av dem som fungerar bra för din webbplats. Klicka sedan på knappen 'Spara & Gå till Bulk Optimizer' längst ner.

Detta tar dig till sidan Media » Massoptimering.

Pluginet kommer automatiskt att börja optimera alla dina WordPress-bilder i bakgrunden.

Om du har många bilder kan detta ta ett tag. Oroa dig inte, du kan stänga sidan och komma tillbaka till den senare eftersom stängning av sidan inte stoppar bildoptimeringsprocessen.

Testa dina WebP-bilder i WordPress

När optimeringen är klar kan du besöka en sida eller ett inlägg som innehåller några bilder. Håll muspekaren över en bild och högerklicka sedan för att välja 'Öppna bild i ny flik'.

Detta öppnar bilden i en ny webbläsarflik.

Eftersom Imagify behåller den ursprungliga URL-strukturen ser du inte .webp-tillägget i adressfältet. Högerklicka istället på bilden och välj 'Spara bild som...'. Filtypen i spara-fönstret bör ange 'WebP-bild'.

Metod 3: Använda WebP-bilder i WordPress med SG Optimizer

Den här metoden rekommenderas om du är en SiteGround-användare.

SiteGround är ett av de bästa WordPress-värdarna. De erbjuder ett gratis SG Optimizer-plugin till sina användare, vilket gör att du kan optimera din WordPress-prestanda. Det inkluderar även alternativet att optimera WordPress-bilder.

Först måste du installera och aktivera pluginet SG Optimizer.

Vid aktivering lägger pluginet till ett nytt menyalternativ i din admin-sidofält märkt 'SG Optimizer'. Att klicka på det tar dig till pluginets inställningssida.

Här kan du aktivera cacheinställningarna om du vill använda SiteGrounds inbyggda cache-system.

Därefter kan du växla till fliken Media Optimization och slå på alternativet ‘Generate WebP Copies of New Images’.

Nedanför det ser du alternativet 'Massgenerera WebP-filer'.

Att klicka på den här alternativets växlingsknapp startar genereringen av WebP-kopior för alla bildfiler i ditt WordPress-mediabibliotek.

När du är klar kommer din WordPress-webbplats att börja leverera WebP-bilder.

Testa WebP-bilder i SG Optimizer

För att se om din webbplats levererar WebP-bilder måste du öppna en sida på din webbplats med några bilder.

Högerklicka sedan och välj verktyget Inspektera. Detta öppnar utvecklarkonsolen, där du behöver växla till fliken Nätverk.

Härifrån klickar du på fliken 'Img'-filter och laddar sedan om sidan (CTRL+R på Windows och Command+R på Mac). Titta på kolumnen 'Typ' i inspektören. Du bör se 'webp' listat som typ för dina bilder.

Videohandledning

Prenumerera på WPBeginner

Vanliga frågor om WebP-bilder

Många läsare har frågor om att byta till detta filformat och hur det påverkar deras webbplats prestanda. Här är svar på några av de vanligaste frågorna vi får om att använda WebP-bilder i WordPress.

1. Hjälper WebP-bilder verkligen med SEO?

Ja, WebP-bilder kan avsevärt förbättra dina SEO-rankingar. Google anser sidhastighet vara en viktig rankingfaktor, och användning av WebP minskar laddningstiderna för sidor.

Genom att leverera mindre bildfiler förbättrar du dina Core Web Vitals-poäng, vilket hjälper din WordPress-webbplats att rankas högre i sökresultaten.

2. Vad händer om en besökares webbläsare inte stöder WebP?

Medan de flesta moderna webbläsare stöder WebP, gör en liten andel äldre webbläsare det inte.

Om du använder ett optimeringsplugin som EWWW Image Optimizer eller Imagify, upptäcker pluginet automatiskt besökarens webbläsare. Det kommer att leverera WebP-versionen till moderna webbläsare och den ursprungliga JPEG- eller PNG-filen till äldre webbläsare, vilket säkerställer att alla kan se ditt innehåll.

3. Kan jag ladda upp WebP-bilder direkt till WordPress utan ett plugin?

Ja, WordPress 5.8 och senare versioner tillåter dig att ladda upp WebP-filer direkt till ditt mediebibliotek precis som du laddar upp JPEG eller PNG. Att ladda upp filer manuellt konverterar dock inte ditt befintliga mediebibliotek.

För att konvertera dina äldre bilder automatiskt behöver du fortfarande ett plugin för bildoptimering som SG Optimizer eller EWWW Image Optimizer.

4. Är WebP bättre än JPEG eller PNG?

I nästan alla fall är WebP bättre för webbplatsens prestanda. WebP-bilder är vanligtvis 25% till 35% mindre än jämförbara JPEG- eller PNG-filer, samtidigt som de bibehåller samma visuella kvalitet. Denna mindre filstorlek sparar bandbredd och gör att dina sidor laddas mycket snabbare för dina besökare.

5. Kommer konvertering till WebP att radera mina originalbilder?

De flesta plugins för bildoptimering, inklusive Imagify och EWWW Image Optimizer, raderar inte dina originalbilder som standard. De skapar en WebP-version av bilden för att visas för besökare, samtidigt som originalfilen sparas på din server som en säkerhetskopia. Detta gör att du kan återställa ändringar om du någonsin bestämmer dig för att sluta använda WebP-formatet.

Experthandledningar om användning av bilder i WordPress

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du använder WebP-bilder i WordPress. Du kanske också vill se några andra guider för att använda bilder på din WordPress-webbplats:

• Hur man lägger till bilder korrekt i WordPress (steg för steg)
• Hur man lägger till utvalda bilder eller miniatyrer i WordPress
• WebP vs. PNG vs. JPEG: Bästa bildformatet för WordPress
• Hur man optimerar bilder för webbprestanda utan att förlora kvalitet
• Bästa WordPress-plugins för bildkomprimering jämförda
• Verktyg för att skapa bättre bilder för dina blogginlägg
• Bra WordPress-plugins för att hantera bilder (uppdaterad)
• Bildens Alt-text kontra bildens titel i WordPress – Vad är skillnaden?
• Var lagrar WordPress bilder på din webbplats?
• Hur man enkelt laddar bilder lat i WordPress

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.