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
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
MOINUDDIN WAHEED says
I was searching for some mechanism to convert my wordpress images to webp as I have seen a huge difference in the file size between a png and jpg images and webp images.
Having webp images will definitely help load the website faster. It will enhance the speed and performance of the website.
Thanks for the guide for converting existing wordpress images to webp format.
WPBeginner Support says
You’re welcome, glad you found our guide helpful
Administratör
Jiří Vaněk says
Usually, I generate WebP images in an external editor. However, is it better practice to upload images in PNG format to the web and then generate them into WebP? I mean, is it better to have both formats for the browser to choose from or not? I’m concerned that someone might still be using an old browser that doesn’t support WebP, and then those images won’t display on my website for that user.
WPBeginner Support says
If you specifically want a fallback image then allowing plugins to convert the images for you would be the best option. Creating the WebP images with an editor would be the recommended way to save space on your site.
Administratör
emir says
We used a few images from webp in WooCommerce, while backing up woocommerce on another server, the webp images were not transferred, we returned to jpeg format again.
WPBeginner Support says
Thank you for sharing your experience with webp images. If you reach out to the support for your backup tool, there are normally snippets or other ways to fix that issue!
Administratör
Ashikur Rahman says
if i follow step 1 i would have old files in jpg/png format right? it will create a mess in upload folder. they have remove original file option, if i use that option. will it break my post images?
and most importantly what if i deactive/delete eww plugin will it also delete converted webp image also?
what should i do?
WPBeginner Support says
The plugin currently keeps the old images for the browsers that do not support WebP images and would only create the WebP image if it is a better size than the jpg/png. Removing the original would not break your site but if a majority of your visitors are using older browsers that don’t support WebP it could be broken for those users.
You would need to check with the plugin’s support for the current status of the created images when the plugin is removed.
Administratör
Rebecca says
Hi I notice some plugins like wp-optimize allows an option to preserve exif data for webp conversion. Is this data necessary to keep?
Thanks in advance
WPBeginner Support says
It is not required but is useful for the sites that use that information.
Administratör
Theo says
here’s what I’m looking for,
Very helpful
WPBeginner Support says
Glad our guide was helpful!
Administratör
Kim says
Thanks so much for the quick reply!
WPBeginner Support says
Glad we could help
Administratör
Kim says
This is a great tip, just 1 question…will I need to run the EWWW optimizer every time that I upload a new image (PNG, JPG) ?
WPBeginner Support says
The plugin will automate the process for new uploads
Administratör