Så här använder du WebP Images i WordPress (3 metoder)

Vi förstår vikten av att balansera kvaliteten på images med snabbare tider för att hämta dem. Många website-ägare frågar oss om det bästa sättet att använda WebP-images för att göra just detta.

WebP images är ett modernt format som ger bättre bildkomprimering genom att filstorleken minskas utan att bildkvaliteten försämras nämnvärt. Detta gör att din website hämtar bilder snabbare och sparar bandbredd.

Problemet är att WordPress inte har något native support för att uppladare eller displaya WebP images.

I den här artikeln visar vi hur du enkelt kan använda WebP-images i WordPress.

Vad är WebP?

WebP är ett nyare format för images som ska användas på webben. Genom att använda WebP-formatet blir dina images 25-34% mindre i filstorlek än PNG och JPEG utan att förlora i kvalitet.

Om images saktar ner din website kan du förbättra dina testresultat för sidans laddningshastighet genom att konvertera dem till WebP-format.

Du kan läsa mer om komprimering av images i vår guide om hur du optimerar images för webben.

Eftersom WebP är ett new format stöds det ännu inte av alla webbläsare. De flesta moderna webbläsare, som Google Chrome, Firefox och Microsoft Edge, stöder dock WebP images.

Bör du använda WebP Images i WordPress?

WebP images kan hjälpa dig att snabba upp din WordPress website. Det är en rekommenderad bästa praxis som ska användas tillsammans med ett plugin för caching i WordPress, CDN med mera.

Sedan WordPress 5.8 har WordPress stöd för WebP images som standard. Det innebär att du kan save och uploada dina WebP images till din WordPress website utan att använda ett plugin.

Men med detta sagt kanske du ändå gillar att använda ett plugin för komprimering av images på din WordPress site. Om många av dina användare använder webbläsare som inte stöds bör du överväga att använda ett plugin för bildkomprimering.

Plugins för bildkomprimering kan konvertera dina befintliga images till WebP-formatet och visa JPEG- eller PNG-bilder som ett alternativ i webbläsare som ännu inte har support för WebP.

Om din site använder många images och de saktar ner din WordPress blogg, då bör du definitivt överväga att använda WebP-bilder.

Så här använder du WebP images i WordPress. Vi kommer att visa dig flera metoder så att du kan välja den som fungerar bäst för dig:

Video Tutorial

Subscribe to WPBeginner

Om du föredrar skriftliga instruktioner är det bara att fortsätta läsa.

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

EWWW Image Optimizer är ett av de bästa tilläggen för bildkomprimering för WordPress som allow you att optimera your WordPress images. Det stöder även WebP Images och kan automatiskt visa dem i webbläsare som stöds. Se vår EWWW Image Optimizer review för mer detaljer.

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

Efter aktivering, gå till Settings ” EWWW Image Optimizer page för att konfigurera alternativ för plugin. Du kommer att mötas av en Setup Wizard, men du kan klicka på länken ”Jag vet vad jag gör” för att avsluta guiden.

På nästa vy ser du en massa alternativ för plugin.

Rulla ner och kontrollera boxen bredvid alternativet ”WebP-konvertering”.

Därefter klickar du på knappen ”Save Changes” för att lagra dina inställningar.

Därefter måste du rulla ner till WebP Conversion section. Pluginet kommer nu att visa dig några omskrivningsregler med en röd preview image.

You need to click on the ”Insert Rewrite Rules” button, and the plugin will automatically try to insert these rewrite rules into your .htaccess file.

Om pluginet lyckas med att lägga till dessa regler blir den röda preview-bilden grön med texten ”WebP”.

Ibland kan det hända att pluginet inte kan 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år du tillbaka till plugins page med inställningar och klickar på knappen ”Save Changes” igen. Om preview-bilden blir grön betyder det att du utan problem har aktiverat WebP image delivery på din WordPress website.

Alternativt kan du välja mellan JS WebP Rewriting- eller WebP Rewriting-metoder som dina WebP-leveransalternativ. Dessa är lite långsammare än .htaccess-metoden, men de kommer att få jobbet gjort.

Konvertera dina gamla images till WebP-versioner i bulk

EWWW Image Optimizer allow you att enkelt konvertera dina tidigare uppladdade image-filer till WebP-images. Gå bara till sidan Media ” Bibliotek och växla till list view.

Därefter måste du klicka på knappen ”Screen Options” och ändra ”Number of items per page” till 999. Om du har 1000+ images kommer dessa images att visas på nästa page.

På så sätt kan du snabbt välja ett stort antal images för massoptimering. Klicka sedan på Select All checkboxes högst upp för att välja alla images.

Därefter klickar du på dropdown-menyn ”Bulk Actions” och väljer alternativet ”Bulk Optimize”. Slutligen klickar du på knappen ”Tillämpa”.

På nästa vy kommer pluginet att ge dig alternativet att hoppa över komprimeringen av bilderna och bara konvertera dem till WebP. Du kan kontrollera det här alternativet om dina images redan är optimerade.

Efter det klickar du på knappen ”Scan for Unoptimized Images” för att fortsätta. Tillägget kommer sedan att visa dig antalet images som det hittade, så att du kan klicka på knappen Optimera för att fortsätta.

Dina images kommer nu att vara optimerade och EWWW Optimizer kommer att generera WebP-versioner för dina images.

Testa din WebP Image Delivery

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

För muspekaren till en image och högerklicka för att öppna den i en new tab.

Detta öppnar imagen i en new tabs i webbläsaren.

Du kommer att kunna se att den har en .webp-utökning i adressfältet.

Om pluginet inte kan servera WebP-imagen kan du gå tillbaka till plugins page med inställningar. Härifrån kan du ändra alternativet för WebP delivery till metoderna ”JS WebP Rewriting” eller ”WebP Rewriting”.

Metod 2: Använda WebP Images i WordPress med Imagely

Imagely är ett tillägg för optimering av images i WordPress som skapats av personerna bakom WP Rocket, det bästa tillägget för caching i WordPress. Det allows you to easily optimize and convert images to WebP image format. Se vår Imagify review för att lära dig mer.

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

Efter aktivering måste du besöka Settings ” Imagify page för att konfigurera plugin-inställningar. Härifrån klickar du på knappen ”Create a Free API Key” för att fortsätta.

Du kommer att bli ombedd att enter en email address för ditt företag. Efter det kan du kontrollera din inbox för ett email som innehåller din API key. Copy and paste nyckeln till pluginets inställningar page och klicka på knappen ”Save Changes”.

Därefter måste du rulla ner till Optimization section. Där måste du kontrollera alternativen bredvid alternativen ”Skapa webp-versioner av bilder” och ”Visa bilder i webp-format på webbplatsen”.

Under det kan du välja mellan två metoder för delivery för att visa WebP images i WordPress. Den första är .htaccess-metoden och den andra är att använda en tagg.

.htaccess-metoden är snabbare, men den fungerar ej om du använder en CDN-tjänst. Metoden med tag/tagged fungerar också med CDN, men den kan förstöra vissa WordPress themes.

You can choose either one that works well for your site. Efter det klickar du på knappen ”Save & Go to Bulk Optimizer” längst ner.

Då kommer du till sidan Media ” Bulk Optimization.

Plugin kommer automatiskt att börja optimera all your WordPress images i bakgrunden.

Om du har många images kan det här ta ett tag. Oroa dig inte, du kan stänga sidan och komma tillbaka till den senare eftersom att stänga sidan inte kommer att stoppa optimeringsprocessen för images.

Testa dina WebP Images i WordPress

När optimeringen är klar kan du besöka en page eller ett post som innehåller några images. För musen till en image och högerklicka sedan för att välja ”Open image in new tab”.

Detta öppnar imagen i en new tabs i webbläsaren.

Du kommer att kunna se .webp-utökningen i adressfältet.

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

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

SiteGround är ett av de bästa företagen för webbhotell för WordPress. De erbjuder ett gratis SG Optimizer plugin till sina användare, vilket gör att du kan optimera din WordPress prestanda. Det innehåller också alternativet att optimera WordPress images.

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

Vid aktivering kommer pluginet att lägga till ett nytt menu item till din admin sidebar märkt ”SG Optimizer”. Om du klickar på det kommer du till pluginets inställningar page.

Härifrån kan du slå på inställningarna för caching om du vill använda SiteGrounds built-in caching-system.

Därefter kan du växla till fliken Mediaoptimering och aktivera alternativet ”Generera WebP-kopior av nya bilder”.

Under det kommer du att se alternativet att ”Bulk Generate WebP Files”.

Om du klickar på det alternativets knapp för toggle börjar du generera WebP-kopior för alla image-filer i ditt WordPress mediabibliotek.

När det är slutfört kommer din WordPress site att börja servera WebP images.

Testa WebP Images i SG Optimizer

För att se om din website serverar WebP-images måste du öppna en page på din site med några bilder.

Efter det högerklickar du och väljer Inspect tool. Detta öppnar konsolen för utvecklare, där du måste byta till fliken Nätverk.

Härifrån klickar du på tabben ”img” och laddar sedan om sidan (CTRL+R på Windows och Command+R på Mac). När din website laddas om kommer du att se alla images som har laddats i utvecklarens konsol.

Expertguider om hur du använder images i WordPress

Nu när du vet hur du använder WebP-bilder i WordPress kanske du gillar att se några andra guider för att använda images på din WordPress site:

• Så här lägger du till images på rätt sätt i WordPress (Step-by-Step)
• Så här lägger du till featured images eller inläggsminiatyrer i WordPress
• WebP vs. PNG vs. JPEG: Det bästa formatet för images i WordPress
• Så här optimerar du images för webbprestanda utan att förlora kvalitet
• Bästa tillägg för komprimering av images i WordPress jämfört
• Tools för att skapa bättre images för dina blogginlägg
• Bra WordPress tillägg för hantering av images (Updated)
• Image Alt Text vs Image Rubrik i WordPress – Vad är skillnaden?
• Var lagrar WordPress images på din site?
• Hur man enkelt lazy loadar images i WordPress

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du använder WebP images i WordPress. Du kanske också vill se vår guide om hur du skapar ett nyhetsbrev via email och våra expertval för de bästa telefonitjänsterna för företag för din website.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.