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.

Det är därför detta blogginlägg gör en djupdykning i detta ämne!

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

Vad är WebP?

Så… vad är en WebP-fil? Det är ett bildformat som har utvecklats av Google. Du känner väl till bildformaten JPEG, JPG och PNG, eller hur? Tja, webp är ett alternativt filformat för bilder.

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 …

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?

WebP stöder både komprimering med förluster och komprimering som är förlustfri, 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:

Det anmärkningsvärda undantaget är dock Safari. Vid den tidpunkt då vi skriver det här inlägget, stöds WebP-bilder varken på dator eller eller mobil när det gäller Safari. Apple experimenterade kort med WebP-stöd för Safari 2016, men inget nytt har hänt sen dess.

Även Internet Explorer saknar WebP-stöd (men Edge stöder WebP eftersom det är baserat på krom).

Totalt använder cirka 77 % av Internetanvändarna en webbläsare som stöder WebP. Så även om det verkligen har ett majoritetsstöd, är 23% för mycket för att ignorera (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):):

Support för WebP

Support för WebP

WebP vs JPG vs PNG Storlek Jämförelse

Enligt Googles tester är WebP-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:

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

Eftersom alla webbläsare inte stöder WebP-bilder, kan du inte bara ladda upp WebP-bildfiler i ditt mediabibliotek och använda dem direkt i WordPress som du kan med JPEG och PNGs.

Som vi nämnde tidigare, nyttjar 23 % av användarna (inklusive alla Safari-användare) 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.

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:

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.

Info

Om du är host på Kinsta, måste du höra av dig till våran support så att vi kan skapa en Nginx-regel för WebP cache-buckets för några av dessa plugins.

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 ShortPixel

Om du vill aktivera WebP-bilder går du till fliken Avancerat och:

  1. Markerar kryssrutan för WebP-bilder
  2. Markerar kryssrutan för att leverera WebP-versionerna. (Detta visas när du markerar den första rutan)
  3. Markerar alternativknappen för Användning av taggsyntaxen <PICTURE> (detta visas efter att du har markerat föregående ruta)
  4. 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 ShortPixel

Spara 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-plugin

Imagify ä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 man tittar på prissättning. 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.

Ä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

Precis som med ShortPixel kan du sprida dina kontogränser över obegränsade webbplatser.

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 Imagify

Om du vill aktivera WebP-bilder bläddrar du ned till avsnittet Optimering och hittar avsnittet WebP-Format:

  1. Markera kryssrutan för att skapa webp-versioner av bilder
  2. Markera rutan för att visa bilder i webp-format…
  3. Välj alternativknappen om du vill använda <picture> taggar
  4. Om du är host på Kinsta och använder Kinsta-CDN ska du ange webbadressen till ditt Kinsta-CDN i rutan Om du använder en CDN-box (vi berättar hur du hittar webbadressen till Kinsta-CDN nedan)
Så här aktiverar du WordPress WebP-bilder i Imagify

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

Om du använder Kinsta CDN kan du hitta CDN-url:en genom att öppna webbplatsen i MyKinsta´s instrumentpanel och besöka fliken Kinsta CDN i webbplatsens inställningar:

Så här hittar du Kinsta-CDN URL

Så här hittar du Kinsta-CDN URL

Om 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-plugin

Optimole ä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:

  1. Det kan visa dina bilder via sin egen CDN (som drivs av Amazon CloudFront).
  2. 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.

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

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´s inställnings-område - WordPress WebP-bilder är aktiverade som standard

Optimole´s inställnings-område – WordPress WebP-bilder är aktiverade 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

Bilderna på din WordPress-webbplats 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öka hastigheten på din webbplats utan att ändra upplevelsen för dina besökare.

WebP är ett modernt bildformat som kan erbjuda en ~ 25% minskning av filstorleken jämfört med jämförande JPEG eller PNG-filer.

De flesta moderna webbläsare stöder WebP och cirka 77 % av Internetanvändarna har en webbläsare som stöder WebP. Dock finns det vissa webbläsare, särskilt Safari, som fortfarande inte erbjuder WebP-stöd, så du kan inte visa WebP-bilder för alla besökare.

För att lösa detta problem kan du använda ett WordPress-plugin som konverterar bilder till WebP och visar WebP-versioner till besökare vars webbläsare stöder detta format, medan du använder de ursprungliga bilderna till besökare vars webbläsare inte stöder det.

Tre plugins som kan hjälpa dig att göra detta är:

För mer info om hur man kan optimera bilder, kolla in vår fullständiga guide för att optimera bilder för webbprestanda.

Har du några frågor om hur du använder WebP på WordPress? Ställ dessa frågor i kommentarerna.


Om du tyckte om den här artikeln, då kommer du att älska Kinsta´s hosting-plattform. Effektivisera din hemsida och få support dygnet runt från vårt rutinerade team på WordPress. Vår Google Cloud-drivna infrastruktur fokuserar på auto-skalning, prestanda och säkerhet. Lås oss visa dig skillnaden med Kinsta! Kolla in våra paket