Om du vill göra din WordPress-webbplats snabbare, kan du tjäna på att minska storleken på dina bilder. Bilder står för ungefär hälften av en webbsidas filstorlek, så även små förbättringar kan ge stora resultat.

WebP är ett modernt bildformat som kan hjälpa dig att minska storleken på dina bilder utan att ändra hur de ser ut. En konvertering av en bild till WebP krymper dess storlek med i genomsnitt ~ 25-35% utan märkbar förlust i kvalitet.

De flesta moderna webbläsare och WordPress 5.8+ stöder WebP direkt ur lådan. I den här artikeln kommer vi att djupdyka i detta spännande nya bildformat och visa dig hur du kan dra nytta av dess häftighet.

Är du redo? Låt oss komma igång!

Vad är WebP?

Så, vad är en WebP-fil? WebP är ett bildformat som är utvecklat av Google för bättre optimering av bilder än de populära bildformaten (på den tiden). Du känner väl till bildformaten JPEG, JPG och PNG.

Obs! Kolla in hur olika bildfiltyper kan påverka hastigheten på din webbplats.

WebP fokuserar på att leverera samma bildfil, bara med en mindre filstorlek. Genom att minska storleken på dina bildfiler kan du fortfarande leverera samma upplevelse till webbplatsens besökare, men din webbplats kommer att laddas snabbare.

I Google´s WebP-komprimeringsstudie upptäckte google exempelvis att en WebP-bildfil i genomsnitt:

  • Är 25-34% mindre än en jämförbar JPEG-bild.
  • Är 26% mindre än en jämförbar PNG-bild.

Så om du kör din webbplats via PageSpeed Insights, är en av de många rekommendationerna att du väljer nästa generations format, dvs WebP:

Google PageSpeed Insights föreslår att du använder WebP-bilder
Google PageSpeed Insights föreslår att du använder WebP-bilder

Så hur kan Google´s WebP-format uppnå dessa minskningar i filstorlek?

För det första stöder den förstörande och förlustfri komprimering, så den exakta minskningen beror på vilket av detta du använder.

Om du nyttjar WebP-komprimering med förluster använder WebP något som kallas ”prediktiv kodning” för att sänka filstorleken. Prediktiv kodning använder värdena för närliggande pixlar i en bild för att förutsäga värden och kodar sedan skillnaden. Den är baserad på VP8 nyckelram-kodning.

Förlustfri WebP använder en mycket mer komplicerad uppsättning metoder som har utvecklats av WebP-teamet.

Om du vill lära dig mer om WebP´s komprimeringstekniker i detalj är den här artikeln en bra utgångspunkt.

Vilka webbläsare stöder WebP?

För att WebP-bilder ska fungera måste de stödjas av besökarnas webbläsare. Även om webbläsarnas stöd är relativt utbyggt idag, är WebP-kompatibilitet fortfarande inte universell.

WebP-bilder stöds av en del populära webbläsare, exempelvis:

  • Chrome (dator och mobil).).
  • Firefox (dator och mobil).
  • Microsoft Edge
  • iOS och macOS Safari (endast macOS 11 Big Sur och senare).
  • Opera(dator och mobil).

När vi skriver det här inlägget har Safari endast delvis ett stöd för WebP-bilder.

Även Internet Explorer saknar WebP-stöd (men Edge stöder WebP eftersom det är baserat på krom). IE-användningen har dock minskat till mindre än 1 % av det totala antalet internetanvändare. Detta är en välsignelse för alla på webben!

Totalt använder cirka 95 % av Internetanvändarna en webbläsare som stöder WebP. Så även om det verkligen har majoritetsstöd, är dessa 5 % ett mindre hinder, särskilt när det gäller Safari-användare på äldre macOS-versioner. I vår WebP-handledning för WordPress nedan, kommer vi att visa dig hur man hanterar detta så att alla dina besökare får en fin upplevelse.

WebP-stöd i större webbläsare.
WebP-stöd i större webbläsare.

WebP vs JPG vs PNG Storlek Jämförelse

Enligt Googles tester är WebP-bilder:

  • 25-34% mindre än jämförbara JPEG-bilder.
  • 26% mindre än liknande PNG-bilder.

Om du vill veta mer om Google´s metod kan du hitta direkta länkar till de fullständiga resultaten nedan:

Båda testerna är baserade på över 11 000 bilder, inklusive:

Är du trött på en långsam värd för din WordPress-webbplats? Vi erbjuder brinner-snabba servrar och världklass support tillgängligt dygnet runt från WordPress-experter. Kolla in våra planer

Så här använder du WebP-bilder på WordPress

Från och med WordPress 5.8 så kommer du att kunna använda WebP-bildformatet på samma sätt som JPEG-, PNG- och GIF-format. Ladda bara upp dina bilder till ditt mediebibliotek och inkludera dem i ditt innehåll. Eftersom WordPress 5.8+ stöder WebP-formatet som standard, behöver du inte installera plugins från tredje part för att ladda upp WebP-bilder. Det borde räcka för de flesta vanliga användningsområden.

För att komma igång omedelbart kan du ta en titt på vår snabbstart om hur du använder WebP-bilder i WordPress 5.8+. Vi föreslår att du går igenom varningarna om WebP-stöd i WordPress.

Men cirka 5 % av alla människor (främst Safari-användare på äldre macOS) använder en webbläsare som inte stöder WebP. Om du konverterar WebP-bilder och använder dem direkt i ditt innehåll skulle dessa besökare inte kunna se dina bilder, vilket skulle förstöra deras webbupplevelse.

Att generera WebP-bilder är inte lika enkelt som att generera en JPG/JPEG-bild, vilket är standardbildfilformatet på de flesta kameror, smartphones och bildbibliotek på nätet. WordPress stöder inte automatisk bildkonvertering till WebP-format (ännu!).

Men oroa dig inte! Det finns en lösning.

Istället för att ladda upp WebP-bilder till WordPress direkt, kan du använda ett WordPress-plugin som konverterar dina ursprungliga bilder till WebP-format. Då finns även den ursprungliga bilden med om en besökares webbläsare inte stöder WebP.

Om du exempelvis laddar upp en JPEG-fil till din webbplats kommer pluginet att:

  • Konvertera JPEG-filen till WebP och använd WebP-versionen för Chrome, Firefox, Edge, osv.
  • Visa den ursprungliga JPEG-filen för besökare som surfar med Safari (på äldre macOS-versioner) och andra webbläsare som inte stöder WebP.

På så sätt kan alla se din bild och alla får snabbast möjliga upplevelse.

Nedan kommer vi att gå igenom några av de bästa WordPress-pluginen för WepP, som samtliga funkar med Kinsta och Kinsta CDN.

ShortPixel

ShortPixel WordPress-plugin

ShortPixel WordPress-plugin

ShortPixel är ett populärt bildoptimerings-plugin för WordPress som kan hjälpa dig att automatiskt ändra storlek och komprimera de bilder som du laddar upp till din WordPress-webbplats.

ShortPixel kan bland annat hjälpa dig att automatiskt konvertera bilder till WebP och skicka dessa bilder till webbläsare som stöder WebP.

ShortPixel har en begränsad, kostnadsfri plan som låter dig optimera ~ 100 bilder per månad kostnadsfritt. Efter detta börjar betalda planer på $ 4,99 per månad för upp till 5.000 bilder / krediter eller $ 9,99 en gång för en förpackning med 10.000 krediter.

ShortPixel räknar varje bildstorlek som du optimerar på WordPress som en kredit. Så om du vill optimera flera miniatyr-bilder, kan en enda bild använda flera krediter. Det finns inga filstorleksgränser för bilder.

Du kan sprida dina ShortPixel-krediter över ett obegränsat antal webbplatser – det finns inga gränser här(och alla dina webbplatser kan använda samma ShortPixel- konto).

För att använda ShortPixel för att visa WebP-bilder på WordPress, måste du installera ett plugin från WordPress.org och lägga till din API-nyckel (som du kan få genom att registrera dig för ett kostnadsfritt ShortPixel-konto).

Under fliken Allmänt kan du ställa in grundläggande inställningar för hur bildoptimering fungerar, vilken komprimeringsnivå som ska användas och om bilder ska ändras eller inte:

Så här ställer du in komprimeringsnivå och bilddimensioner i ShortPixel

Så här ställer du in komprimeringsnivå och bilddimensioner i ShortPixelOm du vill aktivera WebP-bilder går du till fliken Avancerat och:

Markerar kryssrutan för WebP-bilder

Markerar kryssrutan för att leverera WebP-versionerna. (Detta visas när du markerar den första rutan)

Markerar alternativknappen för Användning av taggsyntaxen <PICTURE> (detta visas efter att du har markerat föregående ruta)

Lämna standardinställningen Only via WordPress-hooks selection

Så här aktiverar du WordPress WebP-bilder i ShortPixel

Så här aktiverar du WordPress WebP-bilder i ShortPixelSpara sedan ändringarna.

Om du är host på Kinsta, kommer ShortPixel att ge dig ett varningsmeddelande om att du måste konfigurera server config-filer på Nginx. För att konfigurera dessa inställningar kan du höra av dig till Kinsta support så ställer vi gärna in serverkonfigurationen åt dig.

Imagify

Imagify WordPress-plugin

Imagify WordPress-pluginImagify är ett populärt bildoptimerings-plugin från samma utvecklare som WP Rocket (som är ett av de få caching-plugins som fungerar med Kinsta).

Det kan automatiskt komprimera och ändra storlek på de bilder som du laddar upp till din WordPress-webbplats. Det kan även hjälpa dig att konvertera dem till WebP och visa WebP-versioner för besökare med webbläsare som stöder detta.

När det gäller funktioner, har ShortPixel och Imagify en hel del likheter. Den största skillnaden kommer när du tittar på prissättningen. Medan ShortPixel debiterar dig baserat på bilder utan storleksgräns per bild, tar Imagify ut avgifter baserat på den totala filstorleken, utan bildgräns.

Så om du behöver optimera massor av stora bilder, kan ShortPixel´s strategi vara billigare. Men om du behöver optimera massor av små bilder, kan Imagify´s strategi vara billigare.

Imagify har en begränsad kostnadsfri nivå som möjliggör 25 MB optimeringar per månad. Efter detta börjar betalda planer på $ 4,99 per månad för upp till 1 GB eller $ 9,99 för en engångskredit på 1 GB.

Du kan sprida dina ShortPixel-krediter över ett obegränsat antal webbplatser – det finns inga begränsningar per webbplats (och alla dina webbplatser kan använda samma ShortPixel-konto).

För att använda Imagify för att leverera WebP-bilder på WordPress måste du installera pluginet från WordPress.org och lägga till din API-nyckel för att komma igång.

När du har aktiverat plugin-programmet kan du använda rutan Allmänna inställningar för att välja din komprimeringsnivå.

Så här ställer du in kompressionsnivån i Imagify

Så här ställer du in kompressionsnivån i ImagifyOm du vill aktivera WebP-bilder bläddrar du ned till avsnittet Optimering och hittar avsnittet WebP-Format:

Markera kryssrutan för att skapa webp-versioner av bilder

Markera rutan för att visa bilder i webp-format…

Välj alternativknappen om du vill använda <picture> taggar

Så här aktiverar du WordPress WebP-bilder i Imagify

Så här aktiverar du WordPress WebP-bilder i ImagifyOm du är host på Kinsta, måste du skapa en Nginx-regel för WebP cache-buckets precis som med Shortpixel (hör helt enkelt av dig till Kinsta´s support).

Optimole

Optimole WordPress-plugin

Optimole WordPress-pluginOptimole är ett bildoptimerings-plugin för WordPress som fungerar lite annorlunda än Imagify och ShortPixel. Optimole kan automatiskt komprimera och ändra storlek på dina bilder. Men det har även två andra anmärkningsvärda funktioner:

Det kan visa dina bilder via sin egen CDN (som drivs av Amazon CloudFront).

Det erbjuder adaptiva bilder i realtid där Optimole kommer att leverera den optimalt stora bilden för varje besökare. En person som surfar på en liten skärm kommer exempelvis få en bild med lägre upplösning än någon som surfar på en Retina-skärm.

Denna metod liknar andra realtids-optimering / manipulations-tjänster som Cloudinary, imgix, KeyCDN-Bildbehandling, osv.

Optimole kan även leverera WebP-bilder till besökare med webbläsare som stöder det, som en del av denna bildoptimering i realtid.

Optimole har en begränsad kostnadsfri plan som kan hantera visning av bilder till cirka ~ 5.000 besökare per månad. Efter detta, börjar de betalda planerna på $ 19 per månad för ~ 25.000 besökare.

För att komma igång måste du installera plugin från WordPress.org och aktivera detta med en API-nyckel (som du kan få genom att registrera dig för ett kostnadsfritt Optimole-konto).

När du gör detta, kommer Optimole automatiskt att optimera dina bilder och leverera dem via sin CDN. WebP-stöd är aktiverat som standard, så du behöver inte aktivera det manuellt.

Om du vill konfigurera andra inställningar, exempelvis komprimeringsnivåer och skalningsbeteende, kan du gå till Media → Optimole →Inställningar:

Optimole aktiverar WordPress WebP-bilder som standard.

Optimole aktiverar WordPress WebP-bilder som standard.Eftersom Optimole levererar dina bilder via sitt eget CDN, finns det ingen anledning att ställa in några Nginx-regler om du är host på Kinsta.

Öka ⬆️ webbplatshastigheten samtidigt som ⬇️ du minskar dina bildstorlekar. Lär dig hur du drar nytta av WebP-formatet på din #WordPress webbplats 💥Click to Tweet

Sammanfattning

Din WordPress-webbplats bilder utgör en stor del av filstorleken på en genomsnittlig sida. Om du kan hitta sätt att minska storleken på dina bilder kan du snabba upp din webbplats utan att skada användarupplevelsen. WebP är ett modernt bildformat som gör just detta genom att erbjuda en ~25% minskning av filstorleken jämfört med jämförande JPEG- eller PNG-filer.

Omkring 95 % av internetanvändarna använder redan en webbläsare som stöder WebP. WordPress 5.8+-versioner stöder numera WebP direkt ur lådan. Så det finns ingen anledning till att inte nyttja detta.

Men en minoritet av alla webbläsare, särskilt Safari på äldre macOS-versioner, erbjuder fortfarande inte WebP-stöd. Du kan därför inte visa WebP-bilder för alla besökare, i nuläget. För att lösa detta problem kan du använda ett WordPress-plugin som konverterar bilder till WebP och serverar WebP-versioner till besökare vars webbläsare stöder det. Pluginet gör att du samtidigt nyttjar originalbilderna till besökare vars webbläsare inte stöder WebP.

För mer taktik när det gäller optimering av bilder, kolla in vår fullständiga guide om hur man optimerar bilder för webbprestanda.

Om du har några frågor om nyttjandet av WebP i WordPress, vänligen fråga oss i kommentarerna nedan!


Spara tid, kostnad och maximera webbplatsens prestanda med:

  • Omedelbar hjälp från WordPress -hostingexperter, 24/7.
  • Cloudflare Enterprise-integration.
  • Global publik räckvidd med 34 datacenter över hela världen.
  • Optimering med vår inbyggda Application Performance Monitoring.

Allt detta och mer, i en plan utan långsiktiga kontrakt, assisterad migration och en 30-dagars pengarna-tillbaka-garanti. Kolla in våra paket, eller prata med säljteamet för att hitta den plan som fungerar för dig.