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

På WPBeginner utvärderar vi ständigt ny teknik som kan hjälpa WordPress-användare att skapa snabbare webbplatser med bättre prestanda. WebP-bilder har varit på vår radar ett tag nu, och även om vi ännu inte har implementerat dem på vår egen webbplats, är vi medvetna om formatets potential.

Det som gör WebP intressant är dess förmåga att minska bildfilstorlekar med upp till 35 % utan någon märkbar kvalitetsförlust. Vi har sett webbplatser som använder WebP uppnå meningsfulla förbättringar i laddningshastighet och användarengagemang.

Baserat på vår forskning och testprocess kommer vi att visa dig hur du använder WebP-bilder i WordPress för att dra nytta av hastighetsfördelarna med detta moderna bildformat.

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 eller fallback-alternativ.

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:

1. Använda WebP-bilder i WordPress med EWWW Optimizer
2. Använda WebP-bilder i WordPress med Imagify
3. Använda WebP-bilder i WordPress med SG Optimizer
4. Experthandledningar om användning av bilder i WordPress

Videohandledning

Prenumerera på WPBeginner

Om du föredrar skriftliga instruktioner, fortsätt bara att läsa.

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 mötas av en installationsguide, men du kan klicka på länken ‘Jag vet vad jag gör’ för att avsluta guiden.

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 mellan JS WebP Rewriting eller WebP Rewriting som dina WebP-leveransalternativ. Dessa är lite långsammare än .htaccess-metoden, men de kommer att få jobbet gjort.

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.

Du kommer att kunna se att den har filändelsen .webp i adressfältet.

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 fungerar även med CDN:er, men den kan förstöra vissa WordPress-teman.

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.

Du kommer att kunna se filändelsen .webp i adressfältet.

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’ och laddar sedan om sidan (CTRL+R på Windows och Command+R på Mac). När din webbplats laddas om ser du alla bilder som laddas i utvecklarkonsolen.

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.